table-layout

Avatar of Louis Lazaris
Louis Lazaris

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 的美学优势。但另一个主要优势是性能。规范将固定算法称为“快速”算法,是有充分理由的。浏览器无需在确定列大小之前分析整个表格内容;它只需要分析第一行。因此,结果是更快地处理表格布局。

相关属性

更多信息

浏览器支持

Chrome Safari Firefox Opera IE Android iOS
1+ 1+ 1+ 7+ 5+ 2.1+ 3+