この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:3
ページ更新者:guest
更新日時:2026-06-11 07:07:02

タイトル: テーブル関連のプロパティ
SEOタイトル: CSS テーブル関連プロパティ 完全ガイド（border-collapse / border-spacing / table-layout / caption-side / empty-cells）

この記事の要点
  • CSS のテーブル関連プロパティは 系要素の見た目を制御するための専用プロパティ群
  • 代表は border-collapse（ボーダー結合）/ border-spacing（セル間距離）/ table-layout（列幅計算アルゴリズム）
  • border-collapse: collapse にしないと隣接セルのボーダーが2 重に見える
  • table-layout: fixed は列幅を一度だけ計算するため高速。大量の行があるテーブルで有効
  • caption-side でキャプション位置、empty-cells で空セルのボーダー表示制御ができる

    • CSS のテーブル関連プロパティ概要

    HTML の

    / /
    など、表組み専用要素の見た目を制御するためのプロパティが CSS には用意されています。普通のレイアウトプロパティ（margin / padding / border）に加えて、テーブル固有のものとして次の 5 つが代表的です。

    プロパティ役割主な値
    border-collapseセル間のボーダー結合collapse / separate
    border-spacingセル間の距離（separate 時のみ）長さ（px, em 等）
    table-layout列幅計算アルゴリズムauto / fixed
    caption-side
     の位置
    top / bottom
    empty-cells空セルのボーダー表示show / hide

    border-collapse

    セル境界の表示方法。collapse にすると隣接セルのボーダーが結合され、1 本線になります。separate はセルごとに別ボーダーを描画します。

    /* 結合（よく使う） */
table {
  border-collapse: collapse;
}
table th, table td {
  border: 1px solid #ccc;
  padding: 8px;
}

/* 分離（デフォルト） */
table.separated {
  border-collapse: separate;
  border-spacing: 4px;
}

    border-spacing

    border-collapse: separate のときだけ有効。セル同士の距離を指定します。横と縦を別に指定することも可能です。

    table {
  border-collapse: separate;
  border-spacing: 6px;      /* 縦横とも 6px */
}

/* 横 6px、縦 12px */
table.tight {
  border-spacing: 6px 12px;
}

    table-layout

    列幅の決め方を切り替えます。デフォルトの auto はセル内容を見てから幅を決めるため、行数が多いと描画が遅くなります。fixed は最初の行 + colgroup の幅だけで全体を決め、後の行は計算しません。大規模テーブルでは fixed のほうが圧倒的に高速です。

    table {
  table-layout: fixed;
  width: 100%;
}

/* fixed のとき、列幅は colgroup や 1 行目で固定 */
table col:nth-child(1) { width: 20%; }
table col:nth-child(2) { width: 50%; }
table col:nth-child(3) { width: 30%; }
    値特徴使いどころ
    autoセル内容に応じて自動計算少数行のテーブル
    fixed列幅を 1 回だけ計算。長文は折り返し or はみ出し大量行、性能重視

    caption-side

     要素の位置を上か下に指定します。

    table caption {
  caption-side: bottom;
  font-size: 14px;
  color: #666;
}

    empty-cells

    空のセルのボーダーと背景を表示するかどうか。border-collapse: separate のときだけ有効です。

    table {
  border-collapse: separate;
  empty-cells: hide;   /* 空セルのボーダーを描かない */
}

    display: table 系（テーブル以外の要素を表っぽくする）

    表組みプロパティとは別ですが、display プロパティで任意の要素をテーブルレイアウト相当にすることもできます。

    / 要素や個別セルの width で指定できます。table-layout: fixed と組み合わせると確実に効きます。

    値対応 HTML 要素
    table
    table-row
    table-cell /
    table-row-group
    table-header-group
    table-footer-group
    table-caption

    テーブルの装飾レシピ

    シマシマ（ストライプ）

    tbody tr:nth-child(odd) {
  background: #f9fafb;
}

    ホバー時にハイライト

    tbody tr:hover {
  background: #eff6ff;
}

    ヘッダ行を固定（縦スクロール）

    .table-wrap {
  max-height: 400px;
  overflow-y: auto;
}
thead th {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}

    レスポンシブ（スマホで横スクロール）

    .table-wrap {
  overflow-x: auto;
}
table {
  min-width: 600px;
}

    列幅・行高の制御

    テーブルの列幅は

    ...
    項目説明備考

    長文セルの折り返し

    固定レイアウトで長文が入るとはみ出しがちです。word-break や overflow-wrap で対処します。

    td {
  word-break: break-word;       /* 単語境界を無視して改行 */
  overflow-wrap: anywhere;       /* どこでも改行 */
}

/* 1 行に収めて省略 */
td.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

    テーブルでよくあるアンチパターン

    • レイアウト目的での 使用 — アクセシビリティが下がる。Flexbox / Grid を使う
    • thead / tbody を省略 — 構造化データとして弱くなる。スクリーンリーダ対応も悪化
    • cellspacing / cellpadding 属性 — HTML5 では非推奨。CSS の border-spacing / padding で
    • border-collapse の指定漏れ — ボーダーが二重になって見栄えが悪い
    • 幅指定なしで table-layout: fixed — 列幅が均等割になり崩れやすい

      • 関連

      • table / tr / td / th 要素 — HTML の表組み要素
      • border プロパティ — 境界線全般
      • display プロパティ — 表示モード切替
      • position: sticky — ヘッダ固定
      • CSS Grid — テーブルに代わるレイアウト手段