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

HTML

<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>

CSS

td, th {
   border: 1px solid #888; 
   background-color: khaki;
}
.test {
   border-collapse: separate; 
   empty-cells: hide; 
}
.test2 {
   border-collapse: separate; 
   empty-cells: show; 
}

Result