CSS 表格 - 绿叶网

在 CSS 中，对于表格样式的定义，主要包括以下 4 个方面。

表格标题位置。
表格边框合并。
表格边框间距。
表格空单元格。

CSS 表格标题位置

默认情况下，表格标题位于表格的上方。如果想要把表格标题放在表格的下方，应该怎么去实现呢？

在 CSS 中，我们可以使用 caption-side 属性来定义表格标题的位置。

语法：

caption-side: 关键字;

说明：

caption-side 属性取值只有 2 个，如下表所示。

caption-side 属性取值
属性值	说明
top（默认值）	标题在顶部
bottom	标题在底部

示例 1：CSS 定义表格标题位置

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        table, tr, td, th { border: 1px solid silver; }
        table { caption-side: bottom; }
    </style>
</head>
<body>
    <table>
        <caption>表格标题</caption>
        <!--表头-->
        <thead>
            <tr>
                <th>表头单元格1</th>
                <th>表头单元格2</th>
            </tr>
        </thead>
        <!--表身-->
        <tbody>
            <tr>
                <td>表行单元格1</td>
                <td>表行单元格2</td>
            </tr>
            <tr>
                <td>表行单元格3</td>
                <td>表行单元格4</td>
            </tr>
        </tbody>
        <!--表脚-->
        <tfoot>
            <tr>
                <td>表行单元格5</td>
                <td>表行单元格6</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

页面效果如下图所示。

CSS 定义表格标题位置

分析：

如果想要定义表格标题的位置，在 table 或 caption 这两个元素的 CSS 中定义 caption-side 属性，效果是一样的。不过一般情况下，我们都只是在 table 元素中定义就可以了。

CSS 表格边框合并

当表格加入边框后，单元格之间是有一定空隙的。但在实际开发中，为了让表格更加美观，我们都是要把单元格之间的空隙去除。

在 CSS 中，我们可以使用 border-collapse 属性来去除单元格之间的空隙，也就是将两条边框合并为一条。

语法：

border-collapse: 关键字;

说明：

border-collapse 属性取值只有 2 个，如下表所示。

border-collapse 属性取值
属性值	说明
separate（默认值）	边框分开，有空隙
collapse	边框合并，无空隙

提示: separate 指的是 “分离”，而 collapse 指的是 “折叠”。从英文意思角度可以让我们更好地理解和记忆。

示例 2：CSS 合并表格边框

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        table, th, td { border: 1px solid silver; }
        table { border-collapse: collapse; }
    </style>
</head>
<body>
    <table>
        <caption>表格标题</caption>
        <!--表头-->
        <thead>
            <tr>
                <th>表头单元格1</th>
                <th>表头单元格2</th>
            </tr>
        </thead>
        <!--表身-->
        <tbody>
            <tr>
                <td>表行单元格1</td>
                <td>表行单元格2</td>
            </tr>
            <tr>
                <td>表行单元格3</td>
                <td>表行单元格4</td>
            </tr>
        </tbody>
        <!--表脚-->
        <tfoot>
            <tr>
                <td>表行单元格5</td>
                <td>表行单元格6</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

页面效果如下图所示。

分析：

在 CSS 中，border-collapse 属性也是在 table 元素中定义的。合并边框之后后，如果设置了 border-spacing 和 empty-cells 属性则将失效，因为单元格边框已经成为了共享边框。

CSS 表格边框间距

前面介绍了如何去除表格边框间距，但在实际开发中，有时候我们却需要定义一下表格边框的间距。

在 CSS 中，我们可以使用 border-spacing 属性来定义表格边框间距。

语法：

border-spacing: 数值 ;

说明：

border-spacing 的取值是一个数值，比如像素值（px）、百分比（%）、em、rem 等。对于 border-spacing 属性来说，还需要清楚以下 2 点。

如果 border-spacing 只指定一个值，则水平和垂直间距设置为相同的值。
如果 border-spacing 指定两个值，则第一个值定义水平间距，第二个值定义垂直间距。

示例 3：CSS 定义表格边框间距

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        table, th, td { border: 1px solid silver; }
        table { border-spacing: 8px; }
    </style>
</head>
<body>
    <table>
        <caption>表格标题</caption>
        <!--表头-->
        <thead>
            <tr>
                <th>表头单元格1</th>
                <th>表头单元格2</th>
            </tr>
        </thead>
        <!-- 表身 -->
        <tbody>
            <tr>
                <th>表头单元格1</th>
                <th>表头单元格2</th>
            </tr>
            <tr>
                <th>表头单元格3</th>
                <th>表头单元格4</th>
            </tr>
        </tbody>
        <!--表脚-->
        <tfoot>
            <tr>
                <td>表行单元格5</td>
                <td>表行单元格6</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

页面效果如下图所示。

CSS 定义表格边框间距

分析：

在 CSS 中，border-spacing 属性也是在 table 元素中定义的。

CSS 表格空单元格

在 CSS 中，我们可以使用 empty-cells 属性来定义是否显示 “内容为空的单元格”。

语法：

empty-cells: 关键字;

说明：

empty-cells 的取值有 2 种，如下表所示。

empty-cells 属性取值
取值	说明
show（默认值）	显示
hide	隐藏

注意: empty-cells 属性只在 border-collapse: separate; 时生效，因为 collapse 模式下边框合并，空单元格的边框样式是不可见的。

示例 4：CSS 隐藏空单元格边框

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        table, th, td { border:1px solid red; }
        table { empty-cells: hide; }
    </style>
</head>
<body>
    <table>
        <caption>表格标题</caption>
        <!--表头-->
        <thead>
            <tr>
                <th></th>
                <th>表头单元格2</th>
            </tr>
        </thead>
        <!--表身-->
        <tbody>
            <tr>
                <th>表头单元格1</th>
                <th>表头单元格2</th>
            </tr>
            <tr>
                <th>表头单元格3</th>
                <th>表头单元格4</th>
            </tr>
        </tbody>
        <!--表脚-->
        <tfoot>
            <tr>
                <td>表行单元格5</td>
                <td></td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

页面效果如下图所示。

CSS 隐藏空单元格边框

分析：

如果把 table { empty-cells: hide; } 这一句代码去掉，此时页面效果如下图所示。

CSS 不隐藏空单元格边框

CSS 表格布局

在 CSS 中，我们可以使用 table-layout 属性来控制表格的列宽计算方式。

语法：

table-layout: auto | fixed;

说明：

table-layout 属性取值有以下 2 种。

auto：根据内容自动调整列宽（默认值，适合小表格）。
fixed：基于表格宽度和列宽固定分配，适合大数据表格，提高渲染速度。

示例 5：使用 table-layout: fixed

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        table {
            width: 300px;
            table-layout: fixed;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid silver;
        }
        th {
            width: 50%;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>科目</th>
                <th>分数</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>数学</td>
                <td>90</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

页面效果如下图所示。

CSS 表格布局

分析：

在这个例子中，我们使用 table-layout: fixed; 来固定表格列宽，使得首列占 50% 的宽度。当数据量非常大时，这种方式会比不使用 table-layout: fixed; 的渲染速度快很多。