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;">This is a td element. The td below is empty.</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;">This is a td element. The td above is empty.</td></tr>
</table>

<table style="border: solid 1px red; empty-cells: hide;">
	<tr><td style="border: solid 1px blue; background-color: yellow;">This is a td element. The td below is empty.</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;">This is a td element. The td above is empty.</td></tr>
</table>

Desktop

Chrome

1+ ○

Firefox

1+ ○

Safari

1.2+ ○

Edge

12+ ○

Supported in all versions

IE

11 ○

10 ○

9 ○

8 ○

7 ×

6 ×

Opera

4+ ○

3 or earlier ×

Mobile

iOS Safari

1+ ○

Android Browser

4.4+ ○

3 or earlier ×

Chrome Android

Latest ○

Same support as desktop version

Firefox Android

Latest ○

Same support as desktop version

※ Version data based on MDN.

Specifies how to display table cell elements that contain no visible content. Setting the value to show will display the border and background even when the cell is empty. Setting it to hide will hide the border and background for empty cells.

When a cell is hidden, only the border and background are hidden — the cell still exists in the layout. This is the same as setting the opacity property to 0 or the visibility property to hidden.

This property can only be applied to table cell elements. Since empty-cells is inherited, you can also set it on a parent table or tr element.