CSS：权威指南，第 5 版

第 13 章 CSS 中的表格布局 CSS 中的表格布局

本作品已使用人工智能进行翻译。欢迎您提供反馈和意见：[e-mail]

看到本章的标题，您可能会想："表格布局？这不是已经过时了吗？的确如此，但本章并不是关于使用表格进行布局的。相反，本章讲述的是表格本身通过 CSS 进行布局的方式，这比乍看起来要复杂得多。

与文档布局的其他部分相比，表格是不寻常的。例如，一行中的所有单元格都具有相同的高度，无论每个单元格包含的内容是多是少。共享列的单元格宽度也是如此。相邻的单元格可以共享边框，即使两个单元格的边框样式截然不同。正如你所看到的，这些功能是以牺牲大量行为和规则为代价换来的，其中许多行为和规则深深植根于网络的过去，只适用于表格。

表格格式

在开始考虑如何绘制单元格边框和表格大小之前，我们需要深入研究表格的基本组装方式，以及表格内元素的关联方式。这就是表格格式化，它与表格布局截然不同：只有在格式化完成后，才有可能进行布局。

直观地安排餐桌

首先要了解的是 CSS 如何定义表格的排列。虽然这些知识看似基础，但却是了解如何以最佳方式为表格设计样式的关键。

CSS 对表格元素和内部表格元素进行了区分。在 CSS 中，内部表格元素生成的矩形框有内容、填充和边框，但没有边距。 因此，无法通过给表格单元格设置边距来定义它们之间的分隔。符合 CSS 规范的浏览器会忽略任何为单元格、行或任何其他内部表格元素应用边距的尝试（标题除外，"使用标题 "一节将讨论标题）。

CSS 有六条排列表格的基本规则。这些规则的基础是网格单元，即绘制表格的网格线之间的一个区域。请看图 13-1 中的两个表格，它们的网格单元用虚线表示。

图 13-1. 网格单元格是表格布局的基础

在简单的 2 × 2 表格（如图 13-1 左侧表格）中，网格单元与实际表格单元相对应。在更复杂的表格中，如图 13-1 中的右侧表格，某些表格单元格会跨越多个网格单元格，但请注意，每个表格单元格的边缘都是沿着网格单元格边缘放置的。

这些网格单元格在很大程度上是理论上的构造，它们不能进行样式设计，甚至不能通过 DOM 访问。它们只是一种描述表格如何组合以进行样式设计的方法。

餐桌摆放规则

六条餐桌布置规则如下：

• 每个行框包括 一行网格单元格。表格中的所有行框都按照它们在源文件中出现的顺序从上到下填满表格（表头行框和表脚行框除外，它们分别位于表格的开头和结尾）。因此，有多少行元素（如<tr> 元素），表格就包含多少行网格。

• 行组的方框包含 与其包含的行方框相同的网格单元格。

• 列框包括 一列或多列网格单元格。所有列框按照出现的顺序相邻排列。LTR 语言的第一个列框在左边，RTL 语言的第一个列框在右边。

• 列组的方框包含 与其包含的列方框相同的网格单元格。

• 虽然单元格可以跨几行或几列，但 CSS 并没有定义如何实现跨行或跨列。而是由文档语言来定义跨度。每个跨行单元格都是一个矩形框，宽和高各为一个或多个网格单元格。该跨距矩形的顶行位于跨距网格单元格的父行中。在 LTR 语言中，单元格的矩形必须尽可能靠左，但不得与任何其他单元格框重叠。它还必须位于源文件（在 LTR 语言中）中较早的同一行中所有单元格的右侧。在 RTL 语言中，跨行单元格必须尽可能 ...