如何固定表格布局？ [英] How is table layout fixed rendered?

问题描述

如何固定显示表格布局？
根据17.5.2.1固定表格布局（来自W3）：

How is table layout fixed rendered? According to 17.5.2.1 "Fixed table layout" (from W3):

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

In the fixed table layout algorithm, the width of each column is determined as follows:

1。'width'属性的值除'auto'以外的列元素将设置该列的宽度。

1.A column element with a value other than 'auto' for the 'width' property sets the width for that column.

2。否则，第一行中'width'属性具有'auto'以外的值的单元格将确定该列的宽度。

2.Otherwise, a cell in the first row with a value other than 'auto' for the 'width' property determines the width for that column.

我认为，首先我们检查col元素的宽度，如果将其设置为100px之类的东西，那么我们就使用它，而没有其他用途。
但是下面的布局证明我错了。就像浏览器计算的是MAX（col.width，first-td.width）。
我在这里想念什么？我是否误解了W3的定义？
谢谢

I take it that first we check the width of the col element, and if it's set to something like 100px then we use it and nothing else. However the following layout proves me wrong. It's as if the browser calculates MAX(col.width, first-td.width). What am I missing here? Did I misunderstand the W3 definition? Thanks

小提琴：

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

推荐答案

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

Reading further in the spec, you will find

17.5.2.1固定表格布局

17.5.2.1 Fixed table layout

）算法，表格的水平布局确实
不取决于单元格的内容；它仅取决于
表的宽度，列的宽度以及边框或单元格的间距。

With this (fast) algorithm, the horizontal layout of the table does not depend on the contents of the cells; it only depends on the table's width, the width of the columns, and borders or cell spacing.

表的宽度可以用'width显式指定'
属性。 auto（对于 display：table和 display：
inline-table而言）的值表示使用自动表布局算法。
但是，如果该表是
正常流程中的块级表（ display：table），则UA可以（但不必）...

The table's width may be specified explicitly with the 'width' property. A value of 'auto' (for both 'display: table' and 'display: inline-table') means use the automatic table layout algorithm. However, if the table is a block-level table ('display: table') in normal flow, a UA may (but does not have to) ...

因此，如果要确保完全使用固定表布局 ，请设置宽度表格的属性

So, if you want to make sure that fixed table layout is used at all, set the width property of the table

这篇关于如何固定表格布局？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！