empty-cells

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.

Please take two minutes to fill out our short survey.

The empty-cells CSS property sets whether borders and backgrounds appear around <table> cells that have no visible content.

Try it

empty-cells: show;

empty-cells: hide;

<section class="default-example" id="default-example">
  <table class="transition-all" id="example-element">
    <tr>
      <th>Client Name</th>
      <th>Age</th>
    </tr>
    <tr>
      <td></td>
      <td>25</td>
    </tr>
    <tr>
      <td>Louise Q.</td>
      <td></td>
    </tr>
    <tr>
      <td>Owen B.</td>
      <td></td>
    </tr>
    <tr>
      <td>Stan L.</td>
      <td>71</td>
    </tr>
  </table>
</section>

th,
td {
  border: 2px solid #a19;
  padding: 0.25rem 0.5rem;
}

This property has an effect only when the border-collapse property is separate.

Syntax

css

/* Keyword values */
empty-cells: show;
empty-cells: hide;

/* Global values */
empty-cells: inherit;
empty-cells: initial;
empty-cells: revert;
empty-cells: revert-layer;
empty-cells: unset;

The empty-cells property is specified as one of the keyword values listed below.

Values

show: Borders and backgrounds are drawn like in normal cells.
hide: No borders or backgrounds are drawn.

Formal definition

Initial value	`show`
Applies to	table-cell elements
Inherited	yes
Computed value	as specified
Animation type	discrete

Formal syntax

empty-cells = 
  show  |
  hide

Examples

Showing and hiding empty table cells

HTML

html

<table class="table_1">
  <tr>
    <td>Moe</td>
    <td>Larry</td>
  </tr>
  <tr>
    <td>Curly</td>
    <td></td>
  </tr>
</table>
<br />
<table class="table_2">
  <tr>
    <td>Moe</td>
    <td>Larry</td>
  </tr>
  <tr>
    <td>Curly</td>
    <td></td>
  </tr>
</table>

CSS

css

.table_1 {
  empty-cells: show;
}

.table_2 {
  empty-cells: hide;
}

td,
th {
  border: 1px solid gray;
  padding: 0.5rem;
}

Result

Specifications

Specification
Cascading Style Sheets Level 2 # empty-cells