CSS empty-cells Property

Definition and Usage

The empty-cells property sets whether borders and backgrounds appear around <td> / <th> cells that have no visible content.

It applies to table-cell elements, is inherited, and only has an effect when border-collapse is separate.

CSS Syntax

Usually set on the table. Cells inherit the value unless a cell overrides it.

Property Values

How to Use empty-cells

Use it when a table needs placeholder cells but you want empty ones less visible.

1. Build a real HTML <table> with borders on cells.
2. Keep border-collapse: separate (the default in many cases, but set it explicitly if unsure).
3. Set empty-cells: show or hide on the table.
4. Leave truly empty <td></td> cells — content or   counts as not empty.

Live Preview

Toggle empty-cells. Empty name and age cells change whether their borders stay visible.

CSS Examples

Each snippet focuses on empty-cells. Use Try It Yourself for a live editor.

<style>
  table {
    border-collapse: separate;
    empty-cells: show;
  }
  td {
    border: 1px solid #333;
    padding: 6px;
  }
</style>

<table>
  <tr><td>A</td><td></td></tr>
</table>

<style>
  table {
    border-collapse: separate;
    empty-cells: hide;
  }
  td {
    border: 1px solid #333;
    padding: 6px;
  }
</style>

<table>
  <tr><td>A</td><td></td></tr>
</table>

<style>
  table {
    border-collapse: separate;
    border-spacing: 4px;
    empty-cells: hide;
  }
  td {
    border: 1px solid #333;
    padding: 6px;
  }
</style>

<table>
  <tr>
    <td>Name</td>
    <td></td>
  </tr>
</table>

Key Takeaways