empty-cells

By Dan Gold

empty-cells controls whether an empty table cell’s border and background are painted. It does not remove that cell from the table’s structure.

Compare show and hide

The CSS practice time is deliberately empty in these demonstration tables. Hide removes that cell’s visible paint; its column position remains.

HTML and CSS

HTML

<table class="show">
  <caption>
    Show empty-cell paint
  </caption>
  <thead>
    <tr>
      <th scope="col">Topic</th>
      <th scope="col">Minutes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">HTML</th>
      <td>20</td>
    </tr>
    <tr>
      <th scope="row">CSS</th>
      <td></td>
    </tr>
  </tbody>
</table>
<table class="hide">
  <caption>
    Hide empty-cell paint
  </caption>
  <thead>
    <tr>
      <th scope="col">Topic</th>
      <th scope="col">Minutes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">HTML</th>
      <td>20</td>
    </tr>
    <tr>
      <th scope="row">CSS</th>
      <td></td>
    </tr>
  </tbody>
</table>

CSS

th,
td {
  border: 2px solid #2563eb;
  padding: 0.5rem;
  text-align: left;
}
caption {
  text-align: left;
  font-weight: bold;
}
table {
  margin-block: 1rem;
}
table {
  border-collapse: separate;
  border-spacing: 4px;
}
td {
  background: #dbeafe;
}
.show {
  empty-cells: show;
}
.hide {
  empty-cells: hide;
}

Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.

State missing data explicitly

For real data, “Not recorded” is clearer than an unexplained blank. A nonempty cell keeps its paint even with empty-cells:hide.

HTML and CSS

HTML

<table class="">
  <caption>
    Practice sessions
  </caption>
  <thead>
    <tr>
      <th scope="col">Topic</th>
      <th scope="col">Minutes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">HTML</th>
      <td>20</td>
    </tr>
    <tr>
      <th scope="row">CSS</th>
      <td>Not recorded</td>
    </tr>
  </tbody>
</table>

CSS

th,
td {
  border: 2px solid #2563eb;
  padding: 0.5rem;
  text-align: left;
}
caption {
  text-align: left;
  font-weight: bold;
}
table {
  margin-block: 1rem;
}
table {
  border-collapse: separate;
  border-spacing: 4px;
  empty-cells: hide;
}
td {
  background: #dbeafe;
}

Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.

Values and defaults

The initial value is show and the property is inherited. It applies to table cells in the separate-border model. Show paints an otherwise empty cell normally; hide suppresses its borders and background. Collapsed borders do not use this setting.

Common mistakes

Collapsed whitespace does not make meaningful visible content, while a nonbreaking space or actual text can keep the cell nonempty. Do not use an empty cell to imply zero or “not applicable” unless that meaning is explained. Hiding paint does not remove the cell from accessibility relationships or shift later cells left.

Learn border-collapse, border-spacing, and td.

Sources and browser support

MDN: empty-cells describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.