为什么这个 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 类对于像这样的简单示例没有任何区别。

标签： html css google-chrome html-table

【解决方案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 盒子模型并为宽度添加了填充。这对我来说似乎是一个主要问题......