DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 $200 免费信用额度!
table-layout
属性定义浏览器应使用哪种算法来布置表格行、单元格和列。
table {
table-layout: fixed;
}
如 CSS2.1 规范中所述,表格布局通常是品味问题,将根据设计选择而有所不同。但是,浏览器会自动应用某些约束来定义表格的布局方式。当 table-layout
属性设置为 auto
(默认值)时,就会发生这种情况。但是,当 table-layout
设置为 fixed
时,这些约束可以解除。
值
auto
:默认值。浏览器自动算法用于定义表格行、单元格和列的布局方式。生成的表格布局通常取决于表格的内容。fixed
:使用此值时,表格布局会忽略内容,而是使用表格宽度、任何指定的列宽度以及边框和单元格间距值。使用的列值基于在表格第一行的列或单元格上定义的宽度。inherit
:表示该值从其父级的table-layout
值继承而来。
为了使 fixed
值产生任何影响,表格的宽度必须设置为除 auto
之外的其他值(width
属性的默认值)。在下面的演示中,所有表格宽度都设置为 100%,这假设我们希望表格在水平方向上填充其父容器。
查看固定表格布局算法的效果的最佳方法是使用演示。
查看示例 CSS 的 table-layout 属性的演示,作者是 Louis Lazaris (@impressivewebs),发布在 CodePen 上。
首次查看上面的演示时,您会注意到表格列的布局不平衡且笨拙。在该点,表格使用浏览器的默认算法来定义如何布局表格,这意味着内容将决定布局。演示通过在一个表格单元格中包含一个长字符串,而在所有其他表格单元格中仅使用两个单词来夸大这一事实。如您所见,浏览器扩展了第一列以适应较大的内容。
如果单击“切换 table-layout:fixed”按钮,您将看到使用“fixed”算法时表格布局的样子。当应用 table-layout: fixed
时,内容不再决定布局,而是浏览器使用表格第一行中定义的任何宽度来定义列宽度。如果第一行中没有宽度,则无论单元格中的内容如何,列宽度将在整个表格中平均分配。
更多示例可以帮助更好地理解这一点。在以下演示中,表格包含一个 <colgroup>
元素,其第一个 <col>
元素的宽度为 400px
。请注意,在这种情况下,切换 table-layout: fixed
不会产生任何影响。
查看示例 CSS 的 table-layout 属性的演示,作者是 Louis Lazaris (@impressivewebs),发布在 CodePen 上。
发生这种情况是因为默认布局算法基本上是在说“使第一列的宽度为 400px,并根据其内容分配剩余的列”。由于其他三列具有相同的彼此内容,因此不会发生任何变化。但是现在让我们在其他列之一中添加一些额外的文本内容。
查看示例 使用 col 宽度和可变内容的 CSS 的 table-layout 属性的演示,作者是 Louis Lazaris (@impressivewebs),发布在 CodePen 上。
现在,如果您单击切换按钮,您将看到列调整以适应固定布局,与内容无关。再次,正在发生同样的情况;第一列设置为 400px,然后剩余的列平均分配。但是这次,由于其中一列具有额外的内容,因此差异很明显。
固定布局算法如何确定列宽
以下两个演示应该有助于理解,表格的第一行是帮助定义设置为 table-layout: fixed
的表格的列宽度的。
查看示例 使用第一行中具有定义宽度的单元格的 CSS 的 table-layout 的演示,作者是 Louis Lazaris (@impressivewebs),发布在 CodePen 上。
在上面的演示中,表格第一行中的第一个单元格的宽度为 350px。切换 table-layout: fixed
会调整其他列,但第一列保持不变。现在尝试以下演示。
查看示例 使用第二行中具有定义宽度的单元格的 CSS 的 table-layout 的演示,作者是 Louis Lazaris (@impressivewebs),发布在 CodePen 上。
在这种情况下,是第二行将其第一个表格单元格附加了宽度。现在,当单击切换按钮时,所有列宽度都会调整。再次,这是因为固定布局算法使用第一行来确定列宽度,最终结果是它平均分配宽度。
固定布局算法的优势
从上面的演示中可以清楚地看到使用 table-layout: fixed
的美学优势。但另一个主要优势是性能。规范将固定算法称为“快速”算法,是有充分理由的。浏览器无需在确定列大小之前分析整个表格内容;它只需要分析第一行。因此,结果是更快地处理表格布局。
相关属性
更多信息
- 固定表格布局
- 固定表格布局,在 CSS2.1 规范中
table-layout
属性,在 CSS 表格模块级别 3 中
浏览器支持
Chrome | Safari | Firefox | Opera | IE | Android | iOS |
---|---|---|---|---|---|---|
1+ | 1+ | 1+ | 7+ | 5+ | 2.1+ | 3+ |