How CSS empty-cells: hide Handles Blank Table Cells

The CSS empty-cells: hide property allows developers to control the presentation of empty HTML table cells by suppressing their borders and backgrounds. This article covers how the property determines what qualifies as an "empty" cell, the mandatory layout mode required for it to work, how it affects table geometry, and common implementation pitfalls.

How empty-cells: hide Operates

When applied to an HTML table or individual table cells (<td>, <th>), empty-cells: hide instructs the browser to render completely blank cells without their defined borders or background colors.

Instead of displaying an outlined empty box, the space allocated for that cell becomes fully transparent, revealing the underlying background of the table row or table itself. Crucially, the cell still occupies its normal geometric footprint within the table grid, ensuring that adjacent columns and rows maintain alignment without collapsing the table structure.

The border-collapse Requirement

The most critical factor in using empty-cells: hide is the table's border model. The property only works when border-collapse is set to separate (the default value for HTML tables).

table {
  border-collapse: separate; /* Required for empty-cells to work */
  empty-cells: hide;
}

If a table is styled with border-collapse: collapse;, browsers ignore the empty-cells property entirely. Under the collapsing border model, borders are shared across adjoining cells, making it impossible to suppress a single cell's borders without breaking the shared grid lines.

What Qualifies as an "Empty" Cell?

The browser evaluates cell contents strictly to decide whether the hide rule applies. A cell is considered empty if it contains:

  • Completely nothing (e.g., <td></td>).
  • Collapsible whitespace characters (spaces, tabs, newlines), provided the white-space property is set to a normal, collapsible value.

A cell is not considered empty if it contains:

  • Non-breaking spaces (&nbsp;): Because &nbsp; generates an actual inline text character, the browser treats the cell as populated, rendering its borders and background.
  • Empty child elements: Elements like <td><span></span></td> or self-closing tags like <br> cause the cell to be treated as populated, even if the elements occupy no visible space.
  • Replaced elements: Images, form inputs, or iframes.

Difference Between empty-cells: hide and visibility: hidden

While both properties preserve layout space, they behave differently:

  • empty-cells: hide specifically targets borders and backgrounds of empty cells without requiring inline styles, classes, or DOM manipulation. Populated cells in the same table remain unaffected.
  • visibility: hidden must be applied directly to a target cell or element. It hides all content, borders, and backgrounds, whether the cell contains content or not.

Summary Checklist

To ensure empty-cells: hide renders correctly:

  1. Ensure the table uses border-collapse: separate.
  2. Verify that designated empty cells contain no text, child elements, or non-breaking spaces (&nbsp;).
  3. Apply the rule either globally to the table element or directly to td/th elements.