CSS講座 / 表のデザイン：枠線・列幅・table-layout

CSS講座

CSSで表を整えるときは、表全体の幅、列への幅の配分、セル内の余白を分けて考えます。table-layoutは列幅の計算方法を選び、狭い画面では必要な情報を残したまま表の周囲を横スクロールさせられます。

表の幅とセルの余白を分ける

表のwidthは表全体、thとtdのpaddingは各セルの内側に作用します。border-collapse: collapseは隣り合うセルの枠線をまとめます。表の幅を100%にしても、改行できない長い内容などが最小幅を押し上げれば、親からはみ出す場合があります。

table { width: 100%; border-collapse: collapse; }

th, td { padding: 12px; border: 1px solid #aaa; text-align: start; }

行の高さを一律に固定するより、内容に応じて伸びるようにする方が、説明の追加や文字の拡大に対応できます。高さやoverflowで隠す前に、どの列が幅を必要とするかを確認します。

内容に応じて列幅を配分する

名前は短く説明は長い表なら、列の役割に応じた幅を検討します。次のcolgroupは30%と70%の指定例です。すべての表を均等幅にしたり、同じ比率を使い回したりする必要はありません。

<colgroup>

  <col style="width: 30%;">

  <col style="width: 70%;">

</colgroup>

colgroupは列をまとめ、colは列ごとの指定に使います。自動レイアウトでは内容の最小幅なども関係するため、比率だけで実寸が必ず決まるとは限りません。MDNのcolgroupでHTMLの構造を確認できます。

autoとfixedの列幅計算を比べる

table-layout: autoはセルの内容を考慮して列を計算します。fixedは表の指定幅と列の指定などを使って計算し、内容だけで列幅を広げない配置に向きます。fixedの効果を得るには、表のwidthがauto以外であることも確認します。詳しい条件はMDNのtable-layoutにあります。

下の完全例では、両方の表をwidth: 100%と同じcolgroupにし、計算方法だけを変えます。長い予約番号のセルには、どちらにもnowrap・hidden・ellipsisを指定しています。fixed側では決めた幅の中で省略されますが、auto側は内容の幅の影響を受けて表が広がることがあります。

省略記号は内容を削除する操作ではありません。ただし画面上で読めなくなるため、重要な番号を省略する設計では、詳細表示やコピー手段などで全文にアクセスできることが必要です。

狭い画面では表の周囲をスクロールさせる

.table-scroll { overflow-x: auto; }

table { width: 100%; min-width: 32rem; }

この部分は完全例のスクロール用ラッパーと表の指定です。min-width: 32remは、ルートの文字サイズが16pxなら512pxです。これは実習用の値で、実際には列の数と内容に合わせて決めます。幅が足りないときにページ全体ではなく、この領域だけが横に動くことを確認します。

例ではスクロール領域にtabindex="0"、regionの役割、内容を示す名前を付けています。キーボードで領域へ移動したときのフォーカス表示を残し、左右キーでも最後の列へ到達できるか確認します。MDNのoverflowも参照してください。

完全な例を保存して比較する

次をtables.htmlとしてUTF-8で保存し、ブラウザーで開きます。学習用の二つの表はデータと幅の条件をそろえています。

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Table sizes and long content</title>

  <style>

    body { margin: 16px; color: #333; font: 16px/1.6 sans-serif; }

    .table-scroll { max-width: 640px; overflow-x: auto; margin-block: 16px; }

    .table-scroll:focus-visible { outline: 3px solid #e58c1f; outline-offset: 3px; }

    table { width: 100%; min-width: 32rem; border-collapse: collapse; }

    th, td { padding: 12px; border: 1px solid #aaa; text-align: start; }

    .auto { table-layout: auto; }

    .fixed { table-layout: fixed; }

    .token { font-family: monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    .original { max-width: 640px; overflow-wrap: anywhere; }

  </style>

</head>

<body>

  <h1>Automatic and fixed table layout</h1>

  <h2>table-layout: auto</h2>

  <div class="table-scroll" role="region" aria-label="Auto Batch Comparison Table" tabindex="0"><table class="auto"><colgroup><col style="width: 30%;"><col style="width: 70%;"></colgroup><thead><tr><th scope="col">item</th><th scope="col">explanation</th></tr></thead><tbody><tr><th scope="row">What to bring</th><td>Bring a water bottle and comfortable shoes.</td></tr><tr><th scope="row">reservation code</th><td class="token">GARDEN-VISIT-RESERVATION-2026-ABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr><tr><th scope="row">Visitor Information</th><td>Even if long information sentences span multiple lines, the cell height is increased to match the content.</td></tr></tbody></table></div>

  <h2>table-layout: fixed</h2>

  <div class="table-scroll" role="region" aria-label="Fixed batch comparison table" tabindex="0"><table class="fixed"><colgroup><col style="width: 30%;"><col style="width: 70%;"></colgroup><thead><tr><th scope="col">item</th><th scope="col">explanation</th></tr></thead><tbody><tr><th scope="row">What to bring</th><td>Bring a water bottle and comfortable shoes.</td></tr><tr><th scope="row">reservation code</th><td class="token">GARDEN-VISIT-RESERVATION-2026-ABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr><tr><th scope="row">Visitor Information</th><td>Even if long information sentences span multiple lines, the cell height is increased to match the content.</td></tr></tbody></table></div>

  <p class="original">Full reservation code: GARDEN-VISIT-RESERVATION-2026-ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>

</body>

</html>

画面を狭くし、表の領域をタッチ操作またはTabと左右キーで横に動かします。最後の列が読めるか確認し、左端へ戻します。
fixed側だけをautoへ変え、予約番号と列幅の変化を見てfixedへ戻します。開発者ツールで表の実寸も確認します。
.tokenのwhite-spaceをnormalにし、overflow-wrap: anywhereを追加します。番号が複数行になって高さが増えることを確認し、追加と変更を戻します。
列の比率を40%・60%へ変え、説明の読みやすさを比べて30%・70%へ戻します。

表の列は画面を小さくしても相互の対応が分かるように保ちます。長文を折り返す方法ははみ出しと改行、セルの余白はボックスモデルでも確認できます。

CSS講座