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
8	12	1	1	4	1.2
Tablets / Mobile
1	18	4	10.1	1	1.0

Last updated by CSSPortal on: 26th October 2019