数値列の表
表 ／ パターン集トップ
横罫のみ。数値は等幅数字で右揃え
プレビュー#
コピーする#
上のプレビューでつまみを動かし、「生成する」で調整を反映したコードを作ってからコピーしてください。下の欄は生成の元になる型で、直接コピーするものではありません。
<div class="table-wrap">
<table class="table-numeric">
<caption>月次売上（円）</caption>
<thead><tr><th scope="col">月</th><th scope="col" class="num">売上</th><th scope="col" class="num">前年比</th></tr></thead>
<tbody>
<tr><th scope="row">4月</th><td class="num">1,240,000</td><td class="num">108%</td></tr>
<tr><th scope="row">5月</th><td class="num">980,000</td><td class="num">95%</td></tr>
<tr><th scope="row">6月</th><td class="num">1,510,000</td><td class="num">112%</td></tr>
</tbody>
</table>
</div>.table-wrap {
overflow-x: auto;
}
.table-numeric {
width: 100%;
border-collapse: collapse;
font-size: var(--text-sm);
}
.table-numeric caption {
text-align: start;
margin-block-end: var(--space-3);
font-weight: 700;
}
.table-numeric th,
.table-numeric td {
padding: var(--space-3) var(--space-4);
border-block-end: 1px solid var(--color-border);
border-inline: none;
text-align: start;
vertical-align: top;
}
.table-numeric thead th {
color: var(--color-text-muted);
font-weight: 700;
border-block-end-width: 2px;
}
.table-numeric .num {
text-align: end;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}確認する#
- 縦罫を消し横罫だけにしている
- 数値列は tabular-nums + 右揃え
- caption または見出しで表の目的が分かる