コンパクトな一覧表
表 ／ パターン集トップ
管理画面や設定一覧向け。行高を抑えつつタップ域は確保
プレビュー#
コピーする#
上のプレビューでつまみを動かし、「生成する」で調整を反映したコードを作ってからコピーしてください。下の欄は生成の元になる型で、直接コピーするものではありません。
<table class="table-compact">
<thead><tr><th scope="col">名前</th><th scope="col">状態</th><th scope="col">更新</th></tr></thead>
<tbody>
<tr><td>記事A</td><td>公開</td><td>2026-08-20</td></tr>
<tr><td>記事B</td><td>下書き</td><td>2026-08-18</td></tr>
</tbody>
</table>.table-compact {
width: 100%;
border-collapse: collapse;
font-size: var(--text-sm);
}
/* 行の高さは tr に書く。表のセルは display: table-cell なので
min-block-size を読まない。tr の block-size は最小値として働き、
中身が増えれば 44px から伸びる */
.table-compact tr {
block-size: 2.75rem;
}
.table-compact th,
.table-compact td {
padding: var(--space-2) var(--space-3);
border-block-end: 1px solid var(--color-border);
text-align: start;
vertical-align: middle;
}
.table-compact thead th {
color: var(--color-text-muted);
font-weight: 700;
background: var(--color-surface);
}
.table-compact tbody tr:hover {
background: var(--color-surface);
}確認する#
- 行の高さが 2.75rem を下回らない（tr の block-size で測る）
- zebra より hover で行を示している
- 状態列は badge-status と組み合わせ可能