empty-cells: Show or Hide Empty Table Cells

CSS Reference

empty-cells controls whether an empty table cell paints its border and background in the separated-border model. hide keeps the cell and its space; it does not apply to a table using border-collapse: collapse.

Syntax and value choices

Property	Initial value	Inherited	Main application conditions
`empty-cells`	show	Yes	Table cells in the separated-border model

Initial values are not necessarily the values assigned to HTML elements by the browser’s stylesheet. Inspect the actual result in developer tools’ Computed panel.

table { border-collapse: separate; empty-cells: hide; }

Value or category	Behavior and choice
`show`	Paint the empty cell’s background and border.
`hide`	Suppress that painting while preserving the cell’s space.
`separate`	The border model in which this property takes effect.
`collapse`	The property does not control empty-cell painting in this model.

For supported values and conditions, see MDN empty-cells.

Run the example and compare results

Save this complete code as css-reference-10370-example.html in UTF-8 and open it in a browser. Keep its demonstration styles in that file rather than pasting them into a site-wide stylesheet.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>empty-cells comparison example</title>
<style>
body { margin: 0; color: #20242b; background: #fff; font: 16px/1.7 "Malgun Gothic", sans-serif; }
#demo { padding: 24px; max-width: 820px; margin: auto; }
h1 { font-size: 22px; margin: 0 0 20px; }
.samples { display: flex; flex-wrap: wrap; gap: 24px; }
.label { margin: 0 0 8px; font-weight: 700; }
table { border-collapse: separate; border-spacing: 8px; }
td { padding: 12px; border: 2px solid #006c9c; background: #bfe3ff; }
.target { empty-cells: hide; }
.reference { empty-cells: show; }
</style>
</head>
<body>
<main id="demo">
<h1>empty-cells comparison</h1>
<section class="samples"><div><p class="label">hide</p><table class="target"><tbody><tr><td>Content</td><td></td></tr><tr><td>Second</td><td>Value</td></tr></tbody></table></div><div><p class="label">show</p><table class="reference"><tbody><tr><td>Content</td><td></td></tr><tr><td>Second</td><td>Value</td></tr></tbody></table></div></section>
</main>
</body>
</html>

The first table hides the second empty cell’s background and border. Both tables retain the same rows, columns, and cell space.

What counts as empty?

Visible text, images, and generated content can change whether a cell is considered empty. A nonbreaking space such as   is different from genuinely empty content. Do not insert decorative spaces simply to manufacture a table layout.

Painting is different from deleting data

This property does not remove a row or filter a data value. If readers need to understand missing information, an explicit “Not applicable” value may be clearer than an unexplained blank. Cell spacing and the table’s outer border use separate properties.

Change one setting at a time

Use the complete example file above. Change only the specified selector or value rather than several comparison conditions at once.

Put ordinary whitespace, a nonbreaking space ( ), and visible text into one empty cell in turn, comparing its paint.
Switch the same table to collapse, compare hide/show, then restore separate and the empty cell. Distinguish cell space from its painting.

For table-wide sizing and cell layout, see CSS Tables: Borders, Sizing, and table-layout. Related properties to compare alongside these conditions are border-spacing.

When the result is missing or unexpected

Check that Computed shows border-collapse: separate.
Inspect whitespace, generated content, and children in a cell that remains visible.

CSS Reference

CSS / Reference / text-indent: First-Line Indents and Hanging Paragraphs

Create first-line and hanging indents, distinguish them from paragraph padding, and check inheritance, writing direction, and narrow-screen clipping.

CSS / Reference / calc(): Calculate CSS Values and Understand Their Types

Combine percentages and lengths with calc(), inspect the actual parent width, and distinguish invalid expressions from newer typed arithmetic and special numeric results.

CSS / Reference / letter-spacing, word-spacing: Compare Character and Word Spacing

Adjust character and word gaps independently using the same text and a normal baseline. Account for inheritance, language, wrapping, and excessive negative spacing.

CSS / Reference / empty-cells: Show or Hide Empty Table Cells

Control empty-cell borders and backgrounds in a separated table while preserving its structure. Compare show, hide, whitespace, and the collapsed-border exception.

CSS / Reference / font-variant: Small Capitals and Font Features

Use small capitals without changing the source string and choose specific variant longhands. Compare real font support with synthesized presentation.