CSS empty-cells Property

Description

The empty-cells property sets the display of borders and background in the cell, if it is empty. When the border-collapse property is added to the table with the collapse value, the empty-cells property is ignored.

Initial value
show
Applies to
'table-cell' elements
Inherited
Yes
Media
Visual
Computed value
As specified
Animatable
No
CSS Version
CSS3
JavaScript syntax
object.style.emptyCells

Syntax

empty-cells: show | hide | inherit

Values

  • showRenders empty cells with inherited borders and styles.
  • hideDoes not render the cell.

Example

<table class="test"> 
<caption>empty-cells: hide; </caption>
<tr>
<th>Name</th> <th>Price</th>
</tr>
<tr>
<td>Bananas</td><td></td>
</tr>
<tr>
<td>Apples</td><td>10 Dollars</td>
</tr>
</table>
<table class="test2">
<caption>empty-cells: show; </caption>
<tr>
<th>Name</th><th>Price</th>
</tr>
<tr>
<td>Bananas</td><td></td>
</tr>
<tr>
<td>Apples</td><td>10 Dollars</td>
</tr>
</table>
td, th {
   border: 1px solid #888; 
   background-color: khaki;
}
.test {
   border-collapse: separate; 
   empty-cells: hide; 
}
.test2 {
   border-collapse: separate; 
   empty-cells: show; 
}

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
8121141.2
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
118410.13.1X

Last updated by CSSPortal on: 26th October 2019