th 和 td 宽度不同答案

【问题标题】：th and td width are differentth 和 td 宽度不同
【发布时间】：2018-01-13 23:28:27
【问题描述】：

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

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

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

【问题讨论】：

请发布您的 HTML。

标签： css width css-tables

【解决方案1】：

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

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

【讨论】：

我认为它确实与填充有关，因为当我将其设置为 0 时，td 最终被调整到至少甚至可以慢慢到达那里！

【解决方案2】：

th,td{

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

也许你的padding 会产生这样的影响

【讨论】：

我试过了，但出于某种原因，td 不想听我的 css

【解决方案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

【讨论】：

我试过了，即使填充为 0，但由于某种原因， td 仍然不听宽度，并且 tr 不完全遵循我设置的宽度。有些更大一些。
好的，我最终使用<colgroup></colgroup> 对其进行风格化，但我确实认为 col 也可以。我没有看到任何更改的原因是因为我将它放在我没有查看的不同文件表中 >>;;不过还是谢谢你的建议！我在这个问题上研究太久了。