empty-cells

table.test { empty-cells: show;}
table.test1 tr td { empty-cells: hide;}

<table style="border: solid 1px red; empty-cells: show;">
	<tr><td style="border: solid 1px blue; background-color: yellow;">ここはtd要素です。下のtd要素は空です。</td><td style="border: solid 1px blue; background-color: yellow;"></td></tr>
	<tr><td style="border: solid 1px blue; background-color: yellow;"></td><td style="border: solid 1px blue; background-color: yellow;">ここはtd要素です。上のtd要素は空です。</td></tr>
</table>

<table style="border: solid 1px red; empty-cells: hide;">
	<tr><td style="border: solid 1px blue; background-color: yellow;">ここはtd要素です。下のtd要素は空です。</td><td style="border: solid 1px blue; background-color: yellow;"></td></tr>
	<tr><td style="border: solid 1px blue; background-color: yellow;"></td><td style="border: solid 1px blue; background-color: yellow;">ここはtd要素です。上のtd要素は空です。</td></tr>
</table>

デスクトップ

Chrome

1 以降 ○

Firefox

1 以降 ○

Safari

1.2 以降 ○

Edge

12 以降 ○

全バージョンで対応しています

IE

11 ○

10 ○

9 ○

8 ○

7 ×

6 ×

Opera

4 以降 ○

3 以前 ×

モバイル

iOS Safari

1 以降 ○

Android Browser

4.4 以降 ○

3 以前 ×

Chrome Android

最新版 ○

デスクトップ版と同等の対応です

Firefox Android

最新版 ○

デスクトップ版と同等の対応です

※ バージョン情報は MDN に基づいています。

テーブルセル要素に目に見える内容が含まれていなかった場合の表示方法を指定します。値に『show』と指定すると目に見える内容が含まれていなかった場合でもボーダーと背景は表示され、値に『hide』と指定すると目に見える内容が含まれていなかった場合はボーダーと背景は非表示となります。

非表示となっている場合は、あくまでも境界線と背景が非表示になっているだけなので、そのテーブルセル要素は存在していないものとして扱われるというわけではありません。『opacity』プロパティに『0』、『visibility』プロパティに『hidden』と指定した場合と同じです。ご注意ください。

このプロパティが指定できるのはテーブルセル要素のみとなります。尚、この『empty-cells』プロパティは親要素から値を継承しますので、親のtable要素やtr要素などに『empty-cells』プロパティを指定するといった実装方法も可能です。