The empty-cells property

The empty-cells property tells the browser how to display the background and border of empty td or th cells of HTML tables: show or not.

A cell is considered empty in the following cases: there are no characters at all, the cell contains only a space (one or more), a line break or tab character, or the visibility property is set to hidden.

To make a cell not empty, but without visible text, use the following technique: write a non-breaking space   into the cell.

The property does not work if border-collapse is set to collapse.

Syntax

selector {
	empty-cells: show | hide;
}

Values

Value	Description
`show`	Background and border are shown on empty cells.
`hide`	Background and border are not shown on empty cells.

Default value: show.

Example . The show value

Now some cells in the table are empty, but they still have a border and background:

<table>
	<tr>
		<td>cell</td>
		<td></td>
		<td>cell</td>
	</tr>
	<tr>
		<td></td>
		<td>cell</td>
		<td></td>
	</tr>
	<tr>
		<td>cell</td>
		<td>cell</td>
		<td>cell</td>
	</tr>
</table>

table {
	width: 400px;
	empty-cells: show;
}
td {
	border: 1px solid black;
	background-color: #f3f3f3;
	text-align: center;
}

Example . The hide value

But now empty cells will not have a background or border:

<table>
	<tr>
		<td>cell</td>
		<td></td>
		<td>cell</td>
	</tr>
	<tr>
		<td></td>
		<td>cell</td>
		<td></td>
	</tr>
	<tr>
		<td>cell</td>
		<td>cell</td>
		<td>cell</td>
	</tr>
</table>

table {
	width: 400px;
	empty-cells: hide;
}
td {
	border: 1px solid black;
	background-color: #f3f3f3;
	text-align: center;
}

The empty-cells property

Syntax

Values

Example . The show value

Example . The hide value

See also