mel*_*amo 15 html css google-chrome 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>
这在每个主要浏览器中都能正常呈现,除了Chrome之外,其中列宽分别为46px,102px和102px.
如果我从表元素中取出CSS宽度声明,那么它在Chrome中正确呈现.但我需要这个,否则自动换行将无法正常工作.
知道为什么这不起作用吗？我尝试了不同的doctypes,这没有改变任何东西,所以我假设它不是HTML5表问题.
编辑:事实证明,如果你指定table-layout: fixed 并在像素宽度table元素,并在每一列像素宽度,那么Chrome会认为你列的宽度包括填充.这违反了W3C盒子模型,违反了CSS2要求的行为.
如果您未指定table-layout: fixed或未在table元素上指定像素宽度,则Chrome将正确地假设您指定的列宽不包括填充.所有其他浏览器都假设您的列宽不包括填充.
在上面的示例中,将宽度指定为60px,110px和110px可以解决Chrome中的问题,但然后在其他所有浏览器中将其分解.46px,102px和102px的值来自Chrome,均匀分布列,比例为40:90:90而不是50:100:100.
我今天自己解决了这个问题,table-layout: fixed并box-sizing: border-box强迫Chrome停止考虑填充.否则你永远不会知道Chrome会选择哪种尺寸模型,即使对于两个非常相似的桌子也是如此.
好吧，我的数学表明 Chrome 正在做它应该做的事情：
102 + 102 + 46 = 250px ->宽度
2(5) + 2(5) +2(5) = 10 + 10 + 10 = 30px ->填充
宽度 + 填充 = 250 + 30 = 280px，或您为表格指定的宽度。
| 归档时间： |
|
| 查看次数： |
31706 次 |
| 最近记录： |