Question

考虑这个简单的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中正确呈现。但我需要这个，否则自动换行将无法正常工作。

知道为什么这不起作用？我尝试了不同的doctypes，这没有改变任何东西，所以我假设它不是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。

Answer 1

我今天使用table-layout: fixed和box-sizing: border-box自行解决了这个问题，迫使Chrome停止考虑填充。否则你永远不会知道Chrome会选择哪种尺寸模型，即使对于两个非常相似的桌子也是如此。

Answer 2

好吧，我的数学说Chrome正在做它应该做的事情：

102 + 102 + 46 = 250px - ＆gt;的宽度

2（5）+ 2（5）+2（5）= 10 + 10 + 10 = 30px - >的填充

宽度+填充= 250 + 30 = 280px ，或您为表格指定的宽度。

Answer 3

我的解决方法，仅针对Chrome浏览器执行。我们只在我们的网络应用程序中使用固定表格，看起来效果很好，很高兴知道Chrome有时会完美地标注色域宽度，但有时并不取决于表格所在的位置（并且大部分位于其所在的位置）。 / p>

                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');

                        }
                    }
                });

Answer 4

我通过删除具有以下属性的父元素（fieldset）来修复此问题：

display: inline-flex;

Answer 5

HTML文本中的not to use styles inline更好。

为什么这个HTML表格在Chrome中无法正常运行？

5 个答案: