html - 是什么影响了 <td> 和 <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> elements，你定义了一个600px的宽度，导致头部缩小了一点。要解决此问题，请删除 width行上的属性，或定义 width:660px; .

fiddle :http://jsfiddle.net/zgaPw/4/