テーブルの「空セル」問題、あなたは放置していませんか？：`empty-cells`プロパティの正しい作法
現場でテーブルコーディングをしていると、時折「データが空のセル」に遭遇しますよね。APIから返ってきたレスポンスがnullだったり、特定の条件下で表示すべき値がなかったり。
そのとき、そのセルが「枠線だけ残ってスカスカ」になっていて、UIが締まらない……なんて経験はありませんか？
今回は、そんな地味ながらもUIのクオリティを左右する`empty-cells`プロパティについて、ブラウザの裏側の挙動を含めて深掘りしていきます。中級者こそ意外と見落としがちな、「`border-collapse`との絶対的な相性の悪さ」についても整理しておきましょう。
—
`empty-cells`とは何か：仕様の基本
`empty-cells`は、CSSのテーブルモデルにおいて「内容が空（またはホワイトスペースのみ）のセル」をどう扱うかを決めるプロパティです。
設定値はシンプルに以下の2つです。
- `show`（初期値）: 空セルであっても枠線を描画し、場所を確保する。
- `hide`: 空セルを透明にし、枠線も描画しない（背景色も非表示になる）。
これだけ聞くと「便利じゃん！」と思うかもしれませんが、ここにはフロントエンドエンジニアが必ず知っておくべき「落とし穴」があります。
—
なぜ「border-collapse」と併用できないのか？
CSSのテーブル設計において、`border-collapse: collapse;`（枠線の重ね合わせ）は現代のレイアウトにおける「ほぼデファクトスタンダード」です。しかし、実はこのプロパティと`empty-cells: hide;`は、仕様上、共存できません。
もしあなたが `border-collapse: collapse;` を指定したテーブルで `empty-cells: hide;` を使おうとしても、ブラウザは「無視」します。
なぜか？
`border-collapse: collapse;` は、隣接するセルの枠線を1本に統合して描画する計算モデルです。もし空セルを「消して」しまったら、その周囲の枠線の計算が物理的に破綻してしまいますよね。ブラウザのレンダリングエンジンは、レイアウトの矛盾を避けるために、`collapse`が優先されるときは`empty-cells`の指定を黙殺する仕様になっているのです。
もし `empty-cells: hide;` をどうしても使いたいなら、`border-collapse: separate;`（初期値）に戻し、`border-spacing: 0;` で見た目を整えるという「古き良きハック」が必要になります。
—
実践：現場で使えるコード例
実務では、単に隠すだけでなく「見た目の美しさ」が求められます。以下のコードは、`separate`モードで空セルをスマートに消しつつ、枠線を制御する実用的なパターンです。
/ テーブルの枠線を独立させ、隙間を詰める /
.my-table {
width: 100%;
border-collapse: separate; / collapseだとempty-cellsが効かないため /
border-spacing: 0; / 枠線間の隙間をゼロに /
empty-cells: hide; / 空のセルを非表示に設定 /
border: 1px solid #ccc;
}
.my-table th,
.my-table td {
padding: 12px;
border: 1px solid #ccc;
}
/
- 補足：
- empty-cells: hide を使うと、そのセルは完全に透明になります。
- もし特定のセルに背景色を敷きたい場合は注意が必要です。
/
| 項目名 | 値 |
|---|---|
| ユーザーID | #12345 |
| 備考 |
—
シニアからのアドバイス：本当に「隠す」べきか？
ここまで技術的な仕様を解説しましたが、最後に現場視点でのアドバイスを一つ。
`empty-cells: hide;` を使うと、データの抜け漏れがある箇所が不自然に「穴」のようになり、テーブルの構造が歪んで見えることがあります。ユーザーからすれば「ここにはデータがない」という情報すら得られない状況になりかねません。
ベストプラクティスとしては：
1. UI重視なら: セルが空の場合は「-（ハイフン）」や「N/A」をJavaScript側で注入して、視覚的な一貫性を保つ。
2. 空間重視なら: `empty-cells: hide;` を使いつつ、消えた箇所の背景色や周囲の枠線が不自然にならないか、ブラウザ検証ツールで全方位からチェックする。
「仕様を正しく理解した上で、あえて使わないという選択肢を持つ」ことこそが、中級者から一歩先へ進むためのエンジニアリングスキルです。
テーブルの隅々まで意図を持ってコーディングする。そんな些細なこだわりが、プロダクト全体の品質を底上げします。ぜひ、次回の開発で意識してみてください。
コメント