什么影响​​和<th>元素的宽度？

Question

我试图修复一个表头到窗口的顶部，但由于某种原因以下列方式设置<td>和<th>元素的宽度不会导致元素具有相同的宽度（列标题不与其它列单元格对齐）：

th, td { 
    padding-left: 20px; 
} 

td:first-child, th:first-child { 
    width: 80px; 
} 

td:nth-child(2), th:nth-child(2) { 
    width: 200px; 
} 

td:last-child, th:last-child { 
    width: 320px; 
    padding-right: 20px; 
} 

下面是说明了这一个的jsfiddle例如：http://jsfiddle.net/zgaPw/1/

用它进行试验后，我发现font-size属性似乎影响<td>的宽度，但我不知道为什么或如何纠正它。

有人可以指出什么是错的，以及如何纠正它？谢谢！

Answer 1

单元格的宽度受其兄弟（其他单元格）和父级（<table>）的影响。为了让细胞具有相同的宽度，确定细胞上的宽度属性，它等于：

For each cell: 
    width + padding left + padding right 
= 660px; 

在你的第一行，包含<th>元素，您已经定义的600px的宽度，这会导致头部缩小一点。要解决此问题，请删除行上的width属性，或者定义width:660px;。

小提琴：http://jsfiddle.net/zgaPw/4/