html - 什么会影响<td>和<th>元素的宽度？

我正在尝试将表格标题固定到窗口顶部，但是由于某些原因，以下列方式设置<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>的宽度，但是我不确定为什么或如何更正它。

有人可以阐明一些错误以及如何纠正错误吗？谢谢！

最佳答案

单元格的宽度受其同级（其他单元格）和父级（<table>）的影响。要使单元具有相同的宽度，请在单元上定义一个width属性，该属性等于：

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

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

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

关于html - 什么会影响<td>和<th>元素的宽度？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/8112138/