CSS empty-cells Property

What You’ll Learn

The empty-cells property lets you control whether empty table cells show their borders and background. It is a small but useful tool for cleaner HTML table layouts when some cells have no data.

Introduction

The empty-cells property in CSS is used to control the rendering of table cells that do not contain any content. This property can be particularly useful when you want to ensure that empty cells are either shown or hidden, maintaining the visual consistency of your table layouts.

Definition and Usage

Apply empty-cells to a table element (or a cell, though setting it on the table is most common). When set to hide, cells with no content lose their visible borders and background, which can make sparse tables look cleaner while keeping the same HTML structure.

📝 Syntax

The syntax for the empty-cells property is simple and can be applied to table elements.

element {
  empty-cells: value;
}

Basic Example

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

Default Value

The default value of the empty-cells property is show, meaning that empty cells are displayed with their borders and background.

Syntax Rules

• Apply it to table elements or individual td / th cells.
• Requires border-collapse: separate on the table to take effect.
• A cell is empty only when it has no content — whitespace alone does not count as empty.
• The property is inherited by table cells from the table element.
• Hidden empty cells still occupy space in the table grid; only their borders and background disappear.

💎 Property Values

The empty-cells property accepts two keyword values:

When to Use show vs hide

Examples Gallery

In this example, we’ll demonstrate the effect of the empty-cells property on a table with some empty cells — plus a schedule layout, border-collapse setup, and a styled data table.

<style>
  table {
    border-collapse: separate;
    width: 100%;
  }
  td {
    border: 1px solid black;
    width: 50px;
    height: 50px;
  }
  .show-empty { empty-cells: show; }
  .hide-empty { empty-cells: hide; }
</style>

<h2>empty-cells: show</h2>
<table class="show-empty">
  <tr><td>1</td><td></td><td>3</td></tr>
  <tr><td></td><td>5</td><td></td></tr>
</table>

<h2>empty-cells: hide</h2>
<table class="hide-empty">
  <tr><td>1</td><td></td><td>3</td></tr>
  <tr><td></td><td>5</td><td></td></tr>
</table>

.schedule {
  border-collapse: separate;
  border-spacing: 4px;
  empty-cells: hide;
}

.schedule td {
  border: 1px solid #cbd5e1;
  padding: 0.5rem;
  background: #eff6ff;
}

table {
  border-collapse: separate; /* required */
  border-spacing: 0;
  empty-cells: hide;
}

.data-grid {
  border-collapse: separate;
  border-spacing: 0.5rem;
  empty-cells: hide;
  width: 100%;
}

.data-grid td {
  border: 1px solid #e2e8f0;
  border-radius: 0.4rem;
  padding: 0.75rem;
  background: #fff;
}

♿ Accessibility

• Hidden cells are still in the DOM — screen readers may still encounter empty td elements; use proper table headers and captions.
• Use th for column and row labels so data relationships stay clear even when some cells are visually hidden.
• Do not hide meaningful empty states if “no data” is important information for users.
• Prefer semantic tables for tabular data rather than layout-only grids built with tables.
• Consider aria-label on complex tables when visual empty-cell hiding might confuse the structure.

💡 Best Practices