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

empty-cellsプロパティの説明

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

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

empty-cellsに指定できる値

show

通常のセルと同じように境界線や背景を表示します。これが初期値です。

hide

空のセルは境界線や背景が消されて見えなくなります。ただし、セルの表示範囲は確保されたままです。

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

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

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

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

empty-cellsの実例

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