css - th 和 td 宽度不同

Question

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

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

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

Answer 1

我不明白你为什么必须使用min-width,max-width或<col>. 我认为不同宽度的可能原因是某处的内容迫使单元格比预期的更宽，或者tds 和ths 具有不同的填充。单元格的总宽度是它的宽度加上它的填充。

Unless the padding is specified somewhere, the browser's default paddings will be applied and I guess the padding of the th is likely to be bigger than that of the td

Answer 2

th,td{

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

也许你的padding与众不同

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>

小提琴