ヘッダー固定の表
表 ／ パターン集トップ
縦に長い表で列見出しを残す。横スクロールも許容
プレビュー#
コピーする#
上のプレビューでつまみを動かし、「生成する」で調整を反映したコードを作ってからコピーしてください。下の欄は生成の元になる型で、直接コピーするものではありません。
<div class="table-scroll">
<table class="table-sticky">
<thead><tr><th scope="col">項目</th><th scope="col">Q1</th><th scope="col">Q2</th><th scope="col">Q3</th></tr></thead>
<tbody>
<tr><th scope="row">人件費</th><td>420</td><td>430</td><td>440</td></tr>
<tr><th scope="row">外注費</th><td>80</td><td>95</td><td>110</td></tr>
<tr><th scope="row">広告費</th><td>50</td><td>60</td><td>55</td></tr>
</tbody>
</table>
</div>.table-scroll {
max-block-size: 12rem;
overflow: auto;
border: 1px solid var(--color-border);
}
.table-sticky {
width: 100%;
border-collapse: collapse;
font-size: var(--text-sm);
}
.table-sticky th,
.table-sticky td {
padding: var(--space-2) var(--space-4);
border-block-end: 1px solid var(--color-border);
text-align: start;
background: var(--color-bg);
}
.table-sticky thead th {
position: sticky;
inset-block-start: 0;
z-index: 1;
background: var(--color-surface);
border-block-end: 2px solid var(--color-border);
font-weight: 700;
}確認する#
- スクロール時に thead が見える
- sticky 行の背景が不透明
- 320pxで横スクロールしても崩れない