empty-cells:表のセルが空の場合に境界線や背景を表示するか非表示にするかを指定する

初期値 show
適用対象 表のセル要素
継承 する
アニメーション 離散値
対応ブラウザ caniuseで確認

empty-cellsプロパティの説明

empty-cellsは、表のセルが空の場合に境界線や背景を表示するか非表示にするかを指定します。この機能は、border-collapseの値がseparateだった場合にのみ有効となります。

空のセルは、明確に描画される内容を持つかどうかで判断されます。例えば、単純な半角スペースであれば空の扱いになりますが、 のようにエンティティで明示してある場合は、内容があるものとみなされます。

empty-cellsに指定できる値

show
通常のセルと同じように境界線や背景を表示します。これが初期値です。
hide
空のセルは境界線や背景が消されて見えなくなります。ただし、セルの表示範囲は確保されたままです。

empty-cellsの使い方とサンプル

empty-cellsプロパティの構文は以下の通りです。

CSS
/* キーワード値 */
empty-cells: show;
empty-cells: hide;

/* グローバル値 */
empty-cells: inherit;
empty-cells: initial;
empty-cells: unset;

empty-cellsの実例

それでは実際にempty-cellsプロパティの書き方を見ていきましょう。セルに境界線と背景色を指定した表を用意し、empty-cellsの値を変えた時の挙動を確かめます。

表示確認

empty-cellsに関連するCSSプロパティ

テーブル(table)関連
border-collapse 表のセル同士が隣接する境界線を共有するか分離するかを指定する
border-spacing 表に含まれるセル同士の間隔を指定する
caption-side 表(テーブル)のキャプションの位置を指定する
empty-cells 空白セルのボーダーの表示・非表示を指定する
table-layout テーブルを描画する際のレンダリングアルゴリズムを指定する