CSS empty-cells Property

Description

The empty-cells CSS property is used to control the rendering of table cells that have no content or are otherwise empty. It is particularly useful in situations where you want to display or hide borders, background colors, or other styling for empty table cells. By setting this property to "show," empty cells will be rendered with their specified styles, while setting it to "hide" will ensure that empty cells appear as if they have no styling applied, effectively making them invisible within the table layout. This property helps web developers achieve more precise control over the visual presentation of tables in their web designs.

Initial value: show
Applies to: 'table-cell' elements
Inherited: Yes
Computed value: As specified
Animatable: No
JavaScript syntax: object.style.emptyCells

Interactive Demo

empty-cells: show;

empty-cells: hide;

Bananas	5 Dollars
	10 Dollars
Oranges	2 Dollars
Grapes

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

Editor