考虑这个简单的 HTML 表格:
<!doctype html>
<html>
<head>
<title>Test</title>
</head>
<body>
<table style="border-collapse: collapse; table-layout: fixed; width: 280px;">
<tr>
<td style="padding: 5px; width: 50px; border: 0; word-wrap: break-word;">a</td>
<td style="padding: 5px; width: 100px; border: 0; word-wrap: break-word;">b</td>
<td style="padding: 5px; width: 100px; border: 0; word-wrap: break-word;">c</td>
</tr>
</table>
</body>
</html>
这在每个主流浏览器中都能正确呈现，但在 Chrome 中除外，其中列宽奇怪地分别显示为 46px、102px 和 102px。
如果我从表格元素中取出 CSS 宽度声明，那么它会在 Chrome 中正确呈现。但我需要这个，否则自动换行将无法正常工作。
知道为什么这不起作用吗？我尝试了不同的文档类型，这并没有改变任何东西，所以我假设这不是 HTML5 表格问题。
编辑事实证明，如果您指定 table-layout: fixed 和 table 元素和 每列的像素宽度，那么 Chrome 将假设您的列宽包括填充。这违反了 W3C 框模型并且违反了 CSS2 要求的行为。
如果您没有指定 table-layout: fixed 或者您没有在 table 元素上指定像素宽度，那么 Chrome 将正确地假定您的列宽您指定排除 填充。所有其他浏览器都假定您的列宽不包括填充。
在上面的示例中，将宽度指定为 60px、110px 和 110px 可以解决 Chrome 中的问题，但随后会在所有其他浏览器中出现问题。 46px、102px 和 102px 的值来自 Chrome 以 40:90:90 的比例均匀分布列，而不是 50:100:100。
最佳答案
我今天自己解决了这个问题，使用 table-layout: fixed 和 box-sizing: border-box 强制 Chrome 停止考虑填充。否则，您永远不知道 Chrome 会选择哪种大小模型，即使对于两个非常相似的表格也是如此。
关于html - 为什么这个 HTML 表格在 Chrome 中不能正常工作？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5285811/