样式化表格

September 5, 2024

从 HTML 开始

html

<table>
    <!-- caption 元素用于总结表格的内容，若存在则必须为表格的第一个元素 -->
    <caption>
        Annual surface temperature change in 2022
    </caption>
    <!-- thread 和 tbody 分别包含表格的头部和主体行 -->
    <!-- tr 形成行，其中包含 th（头部）和 td（主体）单元格 -->
    <thead>
        <tr>
            <th scope="column">Country</th>
            <th scope="column">Mean temperature change (°C)</th>
        </tr>
    </thead>
    <!-- 对于 th，可以存在可选的 scope 属性，值为 row 或 column，以推断标题所属的轴 -->
    <tbody>
        <tr>
            <th scope="row">United Kingdom</th>
            <td>1.912</td>
        </tr>
        <tr>
            <th scope="row">Afghanistan</th>
            <td>2.154</td>
        </tr>
        <tr>
            <th scope="row">Australia</th>
            <td>0.681</td>
        </tr>
        <tr>
            <th scope="row">Kenya</th>
            <td>1.162</td>
        </tr>
        <tr>
            <th scope="row">Honduras</th>
            <td>0.945</td>
        </tr>
        <tr>
            <th scope="row">Canada</th>
            <td>1.284</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th scope="row">Global average</th>
            <td>1.4</td>
        </tr>
    </tfoot>
</table>

不要忘记浏览器默认样式如下

css

table {
    display: table;
    border-collapse: separate;
    box-sizing: border-box;
    text-indent: initial;
    unicode-bidi: isolate;
    border-spacing: 2px;
    border-color: gray;
}

caption {
    display: table-caption;
    text-align: -webkit-center;
    unicode-bidi: isolate;
}

thead {
    display: table-header-group;
    vertical-align: middle;
    unicode-bidi: isolate;
    border-color: inherit;
}

tbody {
    display: table-row-group;
    vertical-align: middle;
    unicode-bidi: isolate;
    border-color: inherit;
}

tfoot {
    display: table-footer-group;
    vertical-align: middle;
    unicode-bidi: isolate;
    border-color: inherit;
}

tr {
    display: table-row;
    vertical-align: inherit;
    unicode-bidi: isolate;
    border-color: inherit;
}

th {
    display: table-cell;
    vertical-align: inherit;
    font-weight: bold;
    text-align: -internal-center;
    unicode-bidi: isolate;
}

td {
    display: table-cell;
    vertical-align: inherit;
    unicode-bidi: isolate;
}

FYI
把 table 的 display 设置为 grid，就因为能让样式更容易？
这会破坏浏览器免费提供的内置辅助功能，使得通过辅助技术访问的用户难以访问表格。

现在加入基本的样式（不要忘记浏览器的默认 CSS）

css

body {
    font-family: "Open Sans", sans-serif;
    line-height: 1.5;
}

table {
    text-align: left;
    border-collapse: collapse;
}

th,
td {
    border: 1px solid;
}

加入装饰性的样式

css

/* Text alignment */
th,
caption {
    text-align: start;
}

thead th:not(:first-child),
td {
    text-align: end;
}

/* Headers and footers */
thead {
    border-block-end: 2px solid;
    background: whitesmoke;
}

tfoot {
    border-block: 2px solid;
    background: whitesmoke;
}

th,
td {
    border: 1px solid lightgrey;
    padding: 0.25rem 0.75rem;
}

/* Colouring rows and columns */
table {
    --color: #d0d0f5;
}

thead,
tfoot {
    background: var(--color);
}

tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--color), transparent 60%);
}

对于一个过宽的表格，其在水平方向可能超出视口。让用户移动整个视口往往不够好，解决办法也很简单：
通过一个 <div class="wrapper"> <table/> </div> wrapper 元素包裹表格，并设置 wrapper 元素的 overflow 即可。

固定第一列

表格的 table-layout 默认是 auto，浏览器会自动为我们调整每个列的宽度（CSS Tricks）

改编自：
Styling Tables the Modern CSS Way

引用：
Pure CSS scrolling shadows with background-attachment: local
Fixed Table Headers

←Back to home

This work is licensed under CC BY-NC-SA 4.0