W3docs
en
Log in

CSS empty-cells Property

The empty-cells CSS property defines whether borders and background are shown or not. See the values and try examples with each of them.

The empty-cells property controls whether borders and background are shown or hidden on empty cells in a table. Note that cells containing only whitespace are not considered empty by this property.

This property applies to tables that have a border-collapse property with the value of "separate".

The default value for the empty-cells property is show.

Initial Valueshow
Applies totable-cell elements
InheritedNo.
AnimatableNo
VersionCSS2
DOM Syntaxobject.style.emptyCells = "hide";

Syntax

Syntax of CSS empty-cells Property

empty-cells: show | hide | initial | inherit;

Example of the empty-cells property:

Example of CSS empty-cells Property with show and hide values

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .show {
        empty-cells: show;
      }
      .hide {
        empty-cells: hide;
      }
      td,
      th {
        border: 1px solid #1c87c9;
        padding: 0.5rem;
      }
      table {
        border-collapse: separate;
      }
    </style>
  </head>
  <body>
    <h2>Empty-cells property example</h2>
    <p>Here the "show" value is used: </p>
    <table class="show">
      <tr>
        <td>Moe</td>
        <td>Larry</td>
      </tr>
      <tr>
        <td>Curly</td>
        <td></td>
      </tr>
    </table>
    <br />
    <p>In this table the "hide" value is used:</p>
    <table class="hide">
      <tr>
        <td>Moe</td>
        <td>Larry</td>
      </tr>
      <tr>
        <td>Curly</td>
        <td></td>
      </tr>
    </table>
  </body>
</html>
Try it Yourself »

The empty-cells property controls whether borders and backgrounds are rendered on empty table cells. You can use it when a table might contain empty cells, allowing you to hide them for a cleaner layout. This is especially useful for presentation tables where empty cells might otherwise disrupt the visual design.

Example with hide and show values:

Example of CSS empty-cells Property hide and show values

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .show {
        empty-cells: show;
      }
      .hide {
        empty-cells: hide;
      }
      body {
        background: #1c87c9;
        padding: 25px 0;
        color: #fff;
        font-size: 2em;
        text-align: center;
      }
      table {
        border-collapse: separate;
      }
      td {
        background: #fff;
        border: 1px solid #8ebf42;
        padding: 10px 15px;
        color: green;
      }
    </style>
  </head>
  <body>
    <p>The empty cells are shown</p>
    <table class="show">
      <tbody>
        <tr>
          <td>&diams;</td>
          <td></td>
          <td>&diams;</td>
          <td>&diams;</td>
        </tr>
      </tbody>
    </table>
    <p>The empty cells are hidden</p>
    <table class="hide">
      <tbody>
        <tr>
          <td>&diams;</td>
          <td></td>
          <td>&diams;</td>
          <td>&diams;</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
Try it Yourself »

Result

CSS empty-cells Property with both values

Values

ValueDescriptionPlay it
showMeans that the borders and background on empty cells will be shown. This is the default value of this property.Play it »
hideMeans that the borders and background on empty cells won't be shown.Play it »
initialMakes the property use its default value.Play it »
inheritInherits the property from its parent element.

Practice

Practice

What is the function of the 'empty-cells' property in CSS?