表格布局固定渲染如何？
根据 17.5.2.1“固定表格布局”（来自 W3）：
在固定表格布局算法中，每列的宽度确定如下：
1.“width”属性的值不是“auto”的列元素设置该列的宽度。
2.否则，第一行中“width”属性的值不是“auto”的单元格将确定该列的宽度。
我认为首先我们检查 col 元素的宽度，如果它设置为 100px 之类的值，那么我们就使用它，而不使用其他任何东西。
然而下面的布局证明我错了。就好像浏览器计算 MAX(col.width,first-td.width) 一样。
我在这里缺少什么？我是否误解了 W3 的定义？
谢谢
Fiddle:
http://jsfiddle.net/91qozmnb/
HTML:
<table>
<colgroup>
<col />
<col />
<col />
</colgroup>
<tbody>
<tr>
<td>test1
</td>
<td>test2
</td>
<td>test3
</td>
</tr>
</tbody>
</table>
CSS:
table
{
table-layout:fixed;
border-spacing:0px;
}
table > colgroup > col:nth-child(1)
{
width:100px;
}
table > colgroup > col:nth-child(2)
{
width:150px;
}
table > colgroup > col:nth-child(3)
{
width:200px;
}
table > tbody > tr > td
{
border:5px solid lightgray;
padding:0px;
box-sizing:border-box;
}
table > tbody > tr > td:nth-child(1)
{
width:200px;
}
table > tbody > tr > td:nth-child(2)
{
width:150px;
}
table > tbody > tr > td:nth-child(3)
{
width:100px;
}
进一步阅读规范，您会发现
17.5.2.1 固定表格布局
通过这种（快速）算法，表格的水平布局不会
不依赖于细胞的内容；它仅取决于
表格的宽度、列的宽度以及边框或单元格间距。
表格的宽度可以用“width”明确指定
财产。值为“auto”（对于“display: table”和“display:
inline-table') 表示使用自动表格布局算法。
但是，如果该表是块级表（'display: table'）
正常流程，UA 可能（但不必) ...
因此，如果您想确保固定表格布局是完全使用过、设置表格的宽度属性
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
