Question

我试图让我的表头是静态的，但每当我这样做时，th和td宽度最终会改变。我正在使用CSS做所有这些。我使表头静止的方式是使其位置固定。

我尝试将th和td宽度设置为相同，但这不起作用。

#idOfHeader th { width: 20px; }
#idOfBody td { width: 20px; }

Answer 1

th,td{

width:20px;
max-width:20px;
min-width:20px;
}

也许你的padding会产生这样的差异

Answer 2

我不明白为什么你必须使用min-width，max-width或<col>。我认为不同宽度的可能原因是，某个地方有内容强制某个单元格比所需的宽，或者td和th具有不同的填充。单元格的总宽度是它的宽度加上它的填充。

除非在某处指定了填充，否则将应用浏览器的默认填充，我猜th的填充可能会大于td的填充

Answer 3

在html中使用col标签

<table border="1" width="100%">
  <col width="100">
  <col width="50">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

fiddle

th和td宽度不同

3 个答案: