css - 限制表格宽度

Question

我有一个最大 700px 宽的 html 表，我不知道会有多少列（在 3 到 10 之间）。我希望所有<th>元素都有 5px 填充，但这会增加表格的宽度并导致它所在的 div 显示水平滚动条。

由于我不知道列数，因此无法从总宽度中减去填充添加的额外 px。

将溢出值放在 div 上没有任何意义，因为它只会掩盖 700 像素以外的列。

有没有办法解决这个问题，对表格的宽度设置适当的硬限制？

Answer 1

使用下面的 CSS，这应该可以防止您的表格超过您定义的最大尺寸：

table{
  table-layout:fixed;
}

Answer 2

将表格宽度设置为 100%，并将其父 div 宽度设置为 700px。

Answer 3

最好的解决方案是您现在正在使用的解决方案。

由于您无法预测列数，因此您无法为每列设置宽度。所以设置父div的overflow为auto，子表宽度为100%是最好的解决方案。

Answer 4

你在设置什么填充？

如果您在表格上设置宽度并在td上设置填充，您应该能够得到您想要的。