为何表格width属性不生效？设置小于322px或33%时无效果

嘿，这个问题我之前调试表格的时候也踩过坑！核心原因是表格默认的布局规则在“保护”内容不被截断，导致你设置的小宽度被浏览器忽略了，具体来说：

为什么宽度小于322px/33%就失效？ #

• 表格默认的table-layout属性值是auto，这个模式下，浏览器会自动计算所有单元格内容的最小宽度总和，作为表格的最小宽度阈值。你看到的322px就是这个阈值——所有表头（Nama event、Kategori event这些）和单元格内容加起来的最小宽度，浏览器绝不会让表格窄于这个值，哪怕你手动设了更小的width。
• 百分比的情况同理：当你设的33%宽度换算后小于这个322px的最小阈值时，浏览器同样会优先保证内容能显示，直接忽略你的百分比设置。

怎么解决这个问题？ #

你只需要修改两个地方，就能完全掌控表格的宽度：

1. 强制表格使用固定布局 #

给表格添加table-layout: fixed属性，这个模式下，表格的宽度会严格遵循你设置的值，不再由内容决定：

main div.container>table {
  width: 10px; /* 现在这个值会生效了！ */
  overflow: hidden;
  background-color: red;
  table-layout: fixed; /* 新增这一行 */
}

2. 处理单元格内容（可选） #

设置固定布局后，表格会强制缩到你设置的宽度，但单元格里的内容可能会溢出，你可以根据需求添加样式：

• 想让内容单行显示并省略：给th和td加white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
• 想让内容自动换行：给th和td加word-break: break-all;或white-space: normal;

比如修改后的完整CSS可以是：

main { position: relative; width: 80%; float: right; height: auto; }
div.container { width: 95%; height: auto; margin: 0 auto; }
main div.container>table {
  width: 10px;
  overflow: hidden;
  background-color: red;
  table-layout: fixed; /* 关键属性 */
}
main div.container>table th,
main div.container>table td {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  border: 1px solid #ccc; /* 加个边框方便看效果 */
}

这样设置后，表格就会严格按照你指定的宽度显示，不会再被内容撑开啦！

内容的提问来源于stack exchange，提问作者Bariq Dharmawan