logo标签列表

为什么这个HTML表格在Chrome中不能正常工作？

htmlcssgoogle-chromehtml-table
16

考虑这个简单的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元素上指定table-layout: fixed和像素宽度，并且在每个列上指定像素宽度，则Chrome将假定您的列宽度包括填充。这违反了W3C盒模型，并违反了CSS2所需的行为。

如果您没有指定table-layout: fixed，或者您没有在table元素上指定像素宽度，则Chrome将正确地假定您指定的列宽度不包括填充。所有其他浏览器都假定您指定的列宽度不包括填充。

在上面的示例中，将宽度指定为60px、110px和110px可以解决Chrome中的问题，但会在其他所有浏览器中破坏它。46px、102px和102px的值来自Chrome平均分配列的比率为40:90:90，而不是50:100:100。

6
顺便说一下，内联样式是魔鬼。它们背离了 CSS 的整个目的。 - cHao
13
像这样简单的例子中，使用行内样式或声明CSS类并没有什么区别。 - Random Guy
5个回答
7

今天我使用 table-layout: fixed 和 box-sizing: border-box 成功解决了这个问题，这样就能确保 Chrome 不会考虑 padding。否则你永远不知道 Chrome 会选择哪种尺寸模型，即使是对于两个非常相似的表格也是如此。

1

我的解决方法，仅适用于Chrome浏览器。我们在Web应用程序中仅使用固定表格，看起来效果不错，很好知道有时Chrome可以完美地调整列宽，但有时取决于表格所在的位置（大部分在哪里）。

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

                        }
                    }
                });
1

嗯，我的计算表明Chrome正在做它应该做的事情：

102 + 102 + 46 = 250像素 -> 宽度

2(5) + 2(5) +2(5) = 10 + 10 + 10 = 30像素 -> 填充

宽度 + 填充 = 250 + 30 = 280像素，或者是您为表格指定的宽度。

谢谢回复。它们加起来是280像素，但我将td的宽度指定为50像素、100像素和100像素，那么46像素、102像素和102像素从哪里来？ - melkamo
1
也许浏览器只是感到失望了。我的意思是，它是在计算机上运行的程序，这是一个用于计算的设备，而你却没有给它任何数学问题可做。所以它变得被动挑衅。尝试去掉最后一个宽度，这样它就会感到有用了。 :) - cHao
我认为这是由于您在表格本身上放置的宽度约束所导致的。它强制单元格本身适合280px，_总共_，因此当您指定10px的填充（每侧5px）时，每个单元格的内容被迫挤压以填充剩下的空间。 - Tieson T.
但是50+100+100=46+102+102，所以不需要调整就应该可以正常工作。我刚刚发现如果我在表格中使用60px、110px和110px，并将表格宽度设置为280px，在Chrome中它可以正常工作，但在所有其他浏览器中都太大了（因为它们添加了填充）。因此，如果您设置了总表格宽度，Chrome将停止使用W3C盒模型，并且假定的宽度包括填充。但是如果没有表格宽度，Chrome会正确使用W3C盒模型并将填充添加到宽度中。这对我来说似乎是一个很大的问题... - melkamo
是的，不幸的是，W3C规范指出这就是它应该工作的方式http://www.w3.org/TR/CSS2/tables.html#width-layout。嗯，没有什么用，对吧？ - Tieson T.
显示剩余5条评论
0
我通过移除一个具有以下属性的父元素（fieldset）来解决了这个问题：
display: inline-flex;
-3
6
问题具体是什么？ - Asherah
我认为注释是答案。 - Muhammad Raheel
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接