CSS empty-cells Property

CSS empty-cells Property

The empty-cells property in CSS controls the visibility of empty table cells in a table with border-collapse: separate.

1. Syntax

selector {
  empty-cells: show | hide;
}

Value	Description
show (default)	Empty table cells are visible.
hide	Empty table cells are hidden (collapsed).

2. Basic Example – Default Behavior (empty-cells: show;)

table {
  border-collapse: separate; /* Required for empty-cells to work */
  border: 2px solid black;
}

td {
  width: 50px;
  height: 50px;
  border: 1px solid gray;
}

.empty {
  empty-cells: show;
}

<table class="empty">
  <tr>
    <td>1</td>
    <td></td> <!-- Visible by default -->
  </tr>
</table>

✅ The empty cell remains visible with a border.

3. Hiding Empty Cells (empty-cells: hide;)

.hidden {
  empty-cells: hide;
}

<table class="hidden">
  <tr>
    <td>1</td>
    <td></td> <!-- This cell is hidden -->
  </tr>
</table>

✅ The empty cell disappears, removing its border.

4. Important Notes

• The empty-cells property only works when border-collapse: separate;.
• It does not affect non-empty cells.
• If border-collapse: collapse;, the empty-cells property has no effect.

5. Example – Using border-collapse: collapse;

table {
  border-collapse: collapse; /* empty-cells won't work */
}
td {
  empty-cells: hide; /* No effect */
}

✅ Borders merge, and empty-cells has no effect.

6. Best Practices

✔ Use empty-cells: hide; to clean up unnecessary table gaps.
✔ Ensure border-collapse: separate; is set for empty-cells to work.
✔ Use border-collapse: collapse; if you prefer merged table borders.