CSS empty-cells Property

The empty-cells property sets borders on empty table cells.

The setting only affects the borders, not the space the cells occupy.

Example

#

A table with empty-cells set to hide. Empty cells have no borders.

First name Last name
Denice Hobermann
Paulo Cornell
Jane
<style>
  table.tb { border-collapse: separate; width: 300px; empty-cells: hide; }
  .tb th, .tb td { padding: 5px; border: solid 1px #777; }
  .tb th { background-color: lightblue; }
</style>

<table class="tb">
  <tr>
    <th>First name</th>
    <th>Last name</th>
  </tr>
  <tr>
    <td>Denice</td>
    <td>Hobermann</td>
  </tr>
  <tr>
    <td>Paulo</td>
    <td>Cornell</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td></td>
  </tr>
</table>

Syntax

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

Values

#

Value Description
show Default. Displays borders on empty cells
hide Hide borders on empty cells
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

Click the buttons to see the different empty-cells values.

First name Last name
Denice Hobermann
Paulo Cornell
Jane
<style>
  table.tbl { border-collapse: separate;width: 300px;empty-cells: show; }
  .tbl th, .tbl td { padding: 5px;border: solid 1px #777; }
  .tbl th { background-color: lightblue; }
</style>

<table class="tbl">
  <tr>
    <th>First name</th>
    <th>Last name</th>
  </tr>
  <tr>
    <td>Denice</td>
    <td>Hobermann</td>
  </tr>
  <tr>
    <td>Paulo</td>
    <td>Cornell</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td></td>
  </tr>
</table>

Browser support

This table shows when empty-cells support started for each browser.

Chrome
1.0 Dec 2008
Firefox
1.0 Nov 2004
IE/Edge
8.0 Mar 2009
Opera
4.0 Jun 2000
Safari
1.2 Feb 2004

You may also like

Guides