Caution

JavaScript is disabled in your browser.
This site uses JavaScript for features such as search.
For the best experience, please enable JavaScript before browsing this site.

CSS Dictionary

Home
CSS Dictionary
empty-cells

empty-cells

Specifies how to display table cell elements that contain no visible content.

Sample Code

style.css

/* show border and background for empty cells (initial value) */
table.test { empty-cells: show;}

/* hide border and background for empty cells */
table.test1 tr td { empty-cells: hide;}

/* practical use: summary table with hidden empty cells */
table.summary { empty-cells: hide; border-collapse: collapse;}
table.summary td { border: 1px solid #ccc; padding: 8px;}

Available Values

Value	Description
show	Table cell elements with this value will display their border and background even when they contain no visible content. This is the initial value.
hide	Table cell elements with this value will not display their border or background when they contain no visible content.

Browser Preview

<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>

Overview

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.