html - 如何使两个表具有相同的列宽？

我在不同页面上有2张桌子。两个表的前两列相同。第一列是TearSheet图像，第二列是复选框。

两者都可以在这里看到：http://jsfiddle.net/VH4Q8/1/

我很难使两个表中的前2列具有相同的宽度，即使在每个表中第一列被分配了类tearsheet-image，第二列被分配了类fund-compare-column，其宽度也已指定如下：

.tearsheet-image {
    width: 13px;
}

.fund-compare-column {
    width: 13px;
}

为了使前两列的列宽都相同，我该怎么做？

最佳答案

在CSS中，您有table {width:100%}

这与您的13px / 13px / 250px要求矛盾。因此，我想必须给一些东西。

我发现控制表的列宽的最简单方法是使用<col>元素：

<table>
  <col class="tearsheet-image">
  <col class="fund-compare-column">
  <thead>
    ...

...那么您不必在每一行的每个单元格上指定列的类。但是，如果我没记错的话，并非所有样式属性都将适用，但是宽度和背景适用，但文本对齐不是:(。