为什么这个 HTML 表格在 Chrome 中不能正常工作？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5285811/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why isn't this HTML table working properly in Chrome?
提问by melkamo
Consider this simple HTML table:
考虑这个简单的 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>
This renders properly in every major browser, except in Chrome, in which the column widths bizarrely come out as 46px, 102px and 102px respectively.
这在每个主要浏览器中都能正确呈现，除了在 Chrome 中，其中列宽分别奇怪地显示为 46px、102px 和 102px。
If I take the CSS width declaration out of the table element, then it renders correctly in Chrome. But I need this in there, otherwise word-wrapping won't work correctly.
如果我从 table 元素中取出 CSS 宽度声明，那么它会在 Chrome 中正确呈现。但我需要这个，否则自动换行将无法正常工作。
Any idea why this isn't working? I've tried different doctypes and this hasn't changed anything, so I'm assuming it's not an HTML5 table problem.
知道为什么这不起作用吗？我尝试了不同的文档类型，但这并没有改变任何东西，所以我假设这不是 HTML5 表格问题。
EDIT:It turns out that if you specify table-layout: fixedanda pixel width on the tableelement andpixel widths on each column, then Chrome will assume that your column widths includepadding. This contravenes the W3C box model and is in violation of CSS2 required behaviour.
编辑：事实证明，如果你指定table-layout: fixed并在像素宽度table元素，并在每一列像素宽度，那么Chrome会认为你列的宽度包括填充。这违反了 W3C 框模型并且违反了 CSS2 要求的行为。
If you don't specify table-layout: fixedor you don't specify a pixel width on the tableelement, then Chrome will correctly assume your column widths that you specify excludepadding. All other browsers assume that your column widths excludepadding.
如果您未指定table-layout: fixed或未在table元素上指定像素宽度，Chrome 将正确假定您指定的列宽不包括填充。所有其他浏览器都假定您的列宽不包括填充。
In the example above, specifying the widths as 60px, 110px and 110px would fix the problem in Chrome but then break it in every other browser. The values of 46px, 102px and 102px come from Chrome evenly distributing the columns with a ratio of 40:90:90 instead of 50:100:100.
在上面的示例中，将宽度指定为 60px、110px 和 110px 可以解决 Chrome 中的问题，但随后会在其他所有浏览器中破坏它。46px、102px 和 102px 的值来自 Chrome 以 40:90:90 而不是 50:100:100 的比例均匀分布列。
回答by Chris M. Welsh
I fixed this problem myself today using table-layout: fixedand box-sizing: border-boxto force Chrome to stop taking padding into account. Otherwise you never know what sizing model Chrome will pick, even for two very similar tables.
我今天自己解决了这个问题，table-layout: fixed并box-sizing: border-box强制 Chrome 停止考虑填充。否则你永远不知道 Chrome 会选择什么尺寸模型，即使是两个非常相似的表格。
回答by Tieson T.
Well, my math says Chrome's doing what it should:
好吧，我的数学表明 Chrome 正在做它应该做的事情：
102 + 102 + 46 = 250px -> Widths
102 + 102 + 46 = 250px ->宽度
2(5) + 2(5) +2(5) = 10 + 10 + 10 = 30px -> Padding
2(5) + 2(5) +2(5) = 10 + 10 + 10 = 30px ->填充
Widths + Padding = 250 + 30 = 280px, or the width you specified for the table.
Widths + Padding = 250 + 30 = 280px，或您为表格指定的宽度。
回答by Greg
my method to fix this, executed for chrome browser only. We only use fixed tables in our web app and it seems working good, it's good to know that sometimes Chrome dimensions the col width perfectly, but sometimes not depending on where the table is located (and most of it inside what it's located).
我解决此问题的方法，仅适用于 chrome 浏览器。我们只在我们的 web 应用程序中使用固定表格，它似乎运行良好，很高兴知道有时 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');
}
}
});
回答by Trace
I fixed this problem by removing a parent element (fieldset) that had the following property:
我通过删除具有以下属性的父元素 (fieldset) 解决了这个问题：
display: inline-flex;
回答by eco0013
It's better not to use styles inlinewithin the HTML text.
