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/

影响宽度和元素的是什么？

1 个答案: