この記事の要点

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

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

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

プロパティ	役割	主な値
border-collapse	セル間のボーダー結合	collapse / separate
border-spacing	セル間の距離（separate 時のみ）	長さ（px, em 等）
table-layout	列幅計算アルゴリズム	auto / fixed
caption-side	<caption> の位置	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

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

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 プロパティで任意の要素をテーブルレイアウト相当にすることもできます。

値	対応 HTML 要素
table	<table>
table-row	<tr>
table-cell	<td> / <th>
table-row-group	<tbody>
table-header-group	<thead>
table-footer-group	<tfoot>
table-caption	<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;
}

列幅・行高の制御

テーブルの列幅は <col> / <colgroup> 要素や個別セルの width で指定できます。table-layout: fixed と組み合わせると確実に効きます。

<table>
  <colgroup>
    <col style="width: 30%">
    <col style="width: 50%">
    <col style="width: 20%">
  </colgroup>
  <thead>
    <tr><th>項目</th><th>説明</th><th>備考</th></tr>
  </thead>
  ...
</table>

長文セルの折り返し

固定レイアウトで長文が入るとはみ出しがちです。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;
}

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

• レイアウト目的での <table> 使用 — アクセシビリティが下がる。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 — テーブルに代わるレイアウト手段