Question

如何修复表格布局？根据17.5.2.1＆＃34;固定表格布局＆＃34; （来自W3）：

在固定表格布局算法中，每列的宽度确定如下：

1.一个列元素，其值不是＆＃39; auto＆＃39;对于宽度＆＃39; property设置该列的宽度。

2.否则，第一行中的单元格的值不是＆＃39; auto＆＃39;对于宽度＆＃39; property确定该列的宽度。

我认为首先我们检查col元素的宽度，如果它设置为100px，那么我们使用它而不是其他任何东西。但是，以下布局证明我错了。好像浏览器计算MAX（col.width，first-td.width）。我在这里错过了什么？我是否误解了W3的定义？感谢

小提琴：

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;
}

Answer 1

在规范中进一步阅读，你会发现

17.5.2.1固定表格布局

使用此（快速）算法，表格的水平布局确实如此   不依赖于细胞的内容;它只取决于   表格的宽度，列的宽度以及边框或单元格间距。

可以使用＆＃39;宽度＆＃39;明确指定表格的宽度。   属性。值为＆＃39; auto＆＃39; （对于＆＃39;显示：表＆＃39;和＆＃39;显示：   inline-table＆＃39;）表示使用自动表格布局算法。   但是，如果表是块级表（＆＃39; display：table＆＃39;）in   正常流量，UA可能（但不必）......

因此，如果您想确保固定表格布局全部，请设置表格的宽度属性

如何修复表格布局？

1 个答案: