组件 / 展示表格
表格只用两种线：表头下沿是控件级的 1px solid var(--zz-border-strong)，行与行之间退回发丝线--zz-border-subtle。表头文字回到 sans 600，数字列右对齐并且开tabular-nums，位数才能对齐。
基本表格
单元格内距 0.5rem 0.75rem，表头底是 --zz-surface。行头用<th scope="row">，它比普通单元格更亮但不加粗，避免和表头抢注意力。
数字列
数字列加 .zz-table__num：右对齐 + tabular-nums。表格整体也开了tabular-nums，四处数字不会因字宽不同而抖动。
变体
--tight 把内距收成 0.25rem 0.5rem，适合长清单；--striped给偶数行铺 --zz-surface-2；--bordered 打开全网格线，用于密集的对照表。
横向溢出
列多的时候不要压窄单元格，把表格包进<div class="zz-table-wrap zz-scroll">：前者给 overflow-x: auto， 后者（来自 base.css）给细滚动条。
用法
<div class="zz-table-wrap zz-scroll">
<table class="zz-table zz-table--striped">
<caption>面与线的层级</caption>
<thead>
<tr>
<th scope="col">token</th>
<th scope="col" class="zz-table__num">用量</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"><code>--zz-surface</code></th>
<td class="zz-table__num">38</td>
</tr>
</tbody>
</table>
</div>
类名与 token
| 类名 | 作用 |
|---|
.zz-table | 基础表格：border-collapse: collapse、0.8125rem、整体 tabular-nums |
.zz-table caption | 表题：0.75rem mono --zz-text-muted，左对齐放在表上方 |
.zz-table thead th | sans 600、底 --zz-surface、下边框 --zz-border-strong、不折行 |
.zz-table tbody th | td | 内距 0.5rem 0.75rem，行分隔 --zz-border-subtle（末行去掉） |
.zz-table tbody th | 行头：色 --zz-text、字重 500 |
.zz-table__num | 数字列：右对齐 + tabular-nums |
.zz-table--tight | 内距 0.25rem 0.5rem |
.zz-table--striped | 偶数行铺 --zz-surface-2 |
.zz-table--bordered | 全网格线：单元格 --zz-border-subtle，外框与表头 --zz-border-strong |
.zz-table-wrap | overflow-x: auto；和 base.css 的 .zz-scroll 一起用得到细滚动条 |
可访问性
- 一律用真的
<table>，不要用 grid 拼视觉表格：读屏靠表格结构播报行列关系。 - 每个
<th> 都要有 scope：列头 scope="col"、行头 scope="row"。 - 表题用
<caption>（视觉上就是表上方那行 mono 小字），它同时是表格的无障碍名称。 thead 里的表头加 white-space: nowrap，滚动时表头不会折成两行造成误读；溢出交给外层滚动容器。- 横向滚动容器要能用键盘滚到底：不要在
.zz-table-wrap 上加 tabindex="-1" 之类的"静音"属性。