How to Hide Empty Table Cells Using CSS?

If you wish to hide empty table cells, then you can do either of the following:

1. Use empty-cells Property;
2. Use :empty Pseudo-Class.

For all examples in this post, you can assume a <table> like the following:

<table>
  <thead>
    <tr>
      <th></th>
      <th>Foo</th>
      <th>Bar</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Baz</td>
      <td></td>
      <td>✓</td>
    </tr>
    <tr>
      <td>Qux</td>
      <td>✓</td>
      <td></td>
    </tr>
  </tbody>
</table>

To visibly see the styling, you can add, for example, the following border and background to <td> and <th> elements:

th, td { border: 1px solid red; background-color: pink; }

Using empty-cells Property

The empty-cells CSS property determines if borders and backgrounds are applied to <table> cells that have no visible content. For example, when its value is set to hide, it won't draw any borders or apply any background properties to empty <table> cells.

You can specify empty-cells property on the <table> element, like so:

table { empty-cells: hide; }

This would hide all empty cells in <th> and <td> elements.

The empty-cells property is not very well-known, however, it has very good browser support.

Using :empty Pseudo-Class

You can use the :empty pseudo-class on <th> and/or <td> to hide elements that have no children — i.e. element nodes or text (including whitespace).

For example, to hide empty <th> and <td> elements, you can do the following:

th:empty, td:empty { visibility: hidden; }

Using :empty gives you more control and flexibility over which <table> cells you want to hide. For example, you could exclude either <th> or <td> easily, or you may even combine it with other selectors, such as :nth-child, etc.