CSS 表格

表格通常用于表示表格数据。

使用 CSS 设置表格

当你构建没有任何样式或属性的 HTML 表时，浏览器会显示它们而没有任何边框。使用 CSS 设置表格可以大大改善其外观。

以下部分将向你展示如何使用 CSS 控制表元素的布局和表示，以创建优雅且一致的表。

向表中添加边框

CSS 属性 border 是定义表格边框的最佳方式。

下面的例子将为 <table> 、<th> 和 <td> 元素设置黑色边框。

table, th, td {
    border: 1px solid black;
}

折叠表边框

如果你已经看到上一个示例的输出，你已经注意到每个表格单元格都有单独的边框，并且相邻表格单元格的边框之间存在一些空间。这是因为表格单元格边框默认是分开的。但是，你可以使用 CSS border-collapse 属性将单独的表格边框折叠为一个。

border-collapse CSS 属性选择表格的边框模型。

它可以接受两个值中的一个：折叠或分离。

• 分离的模型是默认的 HTML 表格边框模型，其中每个相邻单元格都有自己独特的边框。
• 在折叠边框模型中，相邻的表格单元格共享边框。

以下示例中的样式规则将折叠表格单元格边框，并在表格和表格单元格元素上应用一个像素黑色边框。

table {
    border-collapse: collapse;
}
table, th, td {
    border: 1px solid black;
}

你还可以通过将 border-spacing 属性的值设置为 0 来删除表格单元格边框之间的空格。但是，它只会删除空格但不会像当设置 border-collapse 为 collapse 时那样合并边框。

注意： 如果未在 HTML 文档中指定 <!DOCTYPE>，则 CSS 属性 border-collapse 可能会产生意外结果。

控制表格布局

默认情况下，表会扩展和收缩以容纳其中包含的数据。当数据填入表格内部时，只要有空间，它就会继续扩展。但是，有时需要为表格设置固定宽度以便管理布局。

你可以在 CSS table-layout 属性的帮助下完成此操作。此属性定义用于布置表格单元格，行和列的算法。提供两种表格布局算法：自动和固定。

• auto - 使用自动表格布局算法。使用此算法，表及其单元格的宽度取决于单元格的内容。
• fixed - 使用固定表格布局算法。使用该算法，表格的水平布局不依赖于单元格的内容; 它只取决于表格的宽度，列的宽度，边框或单元格间距。

以下示例中的样式规则表示该表使用固定布局算法布局，并具有 300 像素的固定宽度。

table {
    width: 300px;
    table-layout: fixed;
}

如果没有固定的 table-layout 属性值，在大型表上，在浏览器呈现整个表之前，用户将看不到表的任何部分。

提示： 你可以通过指定 table-layout 属性来优化表呈现性能。此属性的固定值使表格一次呈现一行，从而以更快的速度为用户提供信息。

处理空单元格

empty-cells CSS 属性控制表中有没有可见的内容是一个使用分离的边框模型计算细胞的边框和背景的渲染。

此属性可以采用以下三个值之一： show ， hide 或 inherit。

以下样式规则隐藏表元素中的空单元格。

table {
    border-collapse: separate;
    empty-cells: hide;
}

控制表格的位置

caption-side CSS 属性设置表格标题框的垂直位置。

以下样式规则将表标题定位在其父表下方。但是，要更改标题文本的水平对齐方式，可以使用 text-align 属性。

caption {
    caption-side: bottom;
}

警告： 最多 7 个 Internet Explorer 不支持标题侧属性。仅当指定了 <!DOCTYPE> 时，IE8 才支持。