empty-cells プロパティ
最終更新：2026-09-13
empty-cells empty-cells プロパティ
empty-cells は、空のセル（内容がない、または空白文字のみのセル）の境界線と背景を表示するかどうかを制御します。デフォルトの show は通常通り表示し、hide はよりすっきりとした見た目のために非表示にします。このプロパティは border-collapse: separate が指定された表にのみ適用されます。
| カテゴリ | |
|---|---|
| 初期値 | show |
| 継承 | はい |
| 適用対象 | |
| アニメーションタイプ | |
| CSS バージョン | CSS2 |
| 状態 | 標準 |
📝 構文
empty-cells: show | hide;⚙️ 値
| 値 | タイプ | 説明 |
|---|---|---|
show | hide | キーワード | 空のセルの境界線 |
▶ 例
以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：
🌐 ブラウザーサポート
| ブラウザー |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| empty-cells | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| すべての主要ブラウザーでサポート | |||||
ヒント： empty-cells を有効にするには border-collapse: separate が必要です。border-collapse: collapse の場合は効果がありません。
❓ よくある質問
Qshow と hide は表の外観にどのような影響を与えますか？
Ashow（デフォルト）: 空のセルは境界線と背景を保持するため、グリッドは完全かつ連続した状態を維持します。hide: 空のセルの境界線と背景が消え、見た目がすっきりとした視覚的な「穴」ができ、データが疎な表に適しています。hide は境界線と背景だけを削除し、セル自体とその幅は引き続きスペースを占有するため、レイアウトには影響しない点に注意してください。
Qなぜ empty-cells: hide が効果を持たないのですか？
Aborder-collapse が separate になっているか確認してください。empty-cells は border-collapse: separate（デフォルト）の場合にのみ機能します。表に border-collapse: collapse が設定されていると、このプロパティは無視されます。これが効かない最も一般的な原因です。separate に切り替えれば機能します。
Qempty-cells のブラウザ対応状況はどうなっていますか？
A対応は非常に優れています。IE を含むすべての主要ブラウザがサポートしており、CSS 2.1 のプロパティです。唯一の注意点は、border-collapse: separate が必要なことです。表の border-collapse の状態を確認すればよく、ベンダープレフィックスは不要です。
Qセルが「空」かどうかをどのように見分ければよいですか？
A空のセルとは、内容がない、または空白文字（スペース、改行）のみのセルです。 （改行なしスペース）は内容としてカウントされるため、empty-cells: hide は適用されません。また、子要素（空の div であっても）を含むセルも空ではありません。このような「擬似的に空の」セルを強制的に非表示にするには、まず内部の空白文字を除去してください。
🏷️ 関連プロパティ
💡 関連事例
📚 関連チュートリアル
