为啥这个 HTML 表格在 Chrome 中不能正常工作？
Posted
技术标签:
【中文标题】为啥这个 HTML 表格在 Chrome 中不能正常工作？【英文标题】：Why isn't this HTML table working properly in Chrome?为什么这个 HTML 表格在 Chrome 中不能正常工作？ 【发布时间】：2011-07-14 05:40:44 【问题描述】：考虑一下这个简单的 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 将正确假定您指定的列宽 exclude 填充。所有其他浏览器都假定您的列宽排除填充。
在上面的示例中，将宽度指定为 60px、110px 和 110px 可以解决 Chrome 中的问题，但在其他所有浏览器中都会出现问题。 46px、102px 和 102px 的值来自 Chrome 以 40:90:90 而不是 50:100:100 的比例均匀分布列。
【问题讨论】：
正所谓，内联样式是魔鬼。它们破坏了 CSS 的全部目的。 @cHao 内联样式或声明 CSS 类对于像这样的简单示例没有任何区别。 【参考方案1】：我通过删除具有以下属性的父元素（字段集）解决了这个问题：
display: inline-flex;
【讨论】：
【参考方案2】：我今天自己解决了这个问题，使用table-layout: fixed 和box-sizing: border-box 强制 Chrome 停止考虑填充。否则你永远不知道 Chrome 会选择什么尺寸模型，即使是两张非常相似的表格。
【讨论】：
【参考方案3】：最好在 HTML 文本中使用not to use styles inline。
【讨论】：
什么……到底是什么问题？ 我认为cmets在回答【参考方案4】：我的解决方法，仅适用于 chrome 浏览器。我们只在我们的网络应用程序中使用固定表格，它似乎工作得很好，很高兴知道有时 Chrome 会完美地调整 col 宽度，但有时并不取决于表格所在的位置（大部分都在它所在的位置）。
var correctedWidth;
var extraSize;
//chrome is taking the padding and border to calculate the column width , not other browsers
$('table.default.fixed > thead > tr > th').each(function()
if ($(this).attr('width')!='undefined' && $(this).attr('width')!=null)
if ($(this).attr('sizeUpdated')=="undefined" || $(this).attr('sizeUpdated')==null)
extraSize = parseInt($(this).css('padding-left'))+parseInt($(this).css('padding-right'))+2; //2 for the borders (2*1px)
if ( parseInt($(this).attr('width'))!= $(this).width() )
correctedWidth=$(this).width()+2*(extraSize);
else
correctedWidth=$(this).width()+extraSize;
$(this).attr('width',correctedWidth+'px');
$(this).attr('sizeUpdated','Y');
);
【讨论】：
【参考方案5】：嗯，我的数学表明 Chrome 正在做它应该做的事情：
102 + 102 + 46 = 250px -> 宽度
2(5) + 2(5) +2(5) = 10 + 10 + 10 = 30px -> 填充
Widths + Padding = 250 + 30 = 280px，或者您为表格指定的宽度。
【讨论】：
感谢您的回复。它们加起来是 280px，是的，但是我将td 的宽度指定为 50px、100px 和 100px，那么 46px、102px 和 102px 是从哪里来的？
也许浏览器只是让你失望了。我的意思是，它是一个在计算机上运行的程序，一个用于计算的设备，而你不需要给它做任何数学运算。所以它是被动攻击性的。试着去掉最后一个宽度，这样感觉很有用。 :)
@cHao：哈哈。当我从第三个td 中取出 100px 宽度时，Chrome 会做一些更奇怪的事情。它假设前两个宽度 include 填充，所以给它们宽度 40px 和 90px！当您错过其他浏览器中的最后一个宽度时，他们不会这样做，并正确地将最终宽度计算为 100px。奇怪。
我相信这是您对 table 本身施加的宽度限制的结果。它强制单元格本身适合 280px，total，因此当您指定 10px 的填充（每边 5px）时，每个单元格的内容被强制挤入以填充剩余的内容。
但是50+100+100=46+102+102，所以不用调整应该可以工作。我刚刚发现，如果我使用 60px、110px 和 110px，以及 280px 在桌面上，它在 Chrome 中可以正常工作，但在所有其他浏览器中太大（因为它们添加了填充）。因此，如果您设置总表宽度，Chrome 将停止使用 W3C 盒子模型，并且假定的宽度包括填充。但是没有表格宽度，Chrome 正确地使用了 W3C 盒子模型并为宽度添加了填充。这对我来说似乎是一个主要问题......以上是关于为啥这个 HTML 表格在 Chrome 中不能正常工作？的主要内容，如果未能解决你的问题，请参考以下文章