html5 Site Icon CSS3 Site Icon CSS Site Icon

CSS 1/2 Reference

CSS empty-cells property

Definition

The CSS empty-cells property allows us to specify whether empty cells display borders and backgrounds when the separated border model is used.

The border-spacing and empty-cell CSS properties are ignored when using the collapsed border model.

Applies To

All table-cell elements.

Property Values

hide - Borders and backgrounds are NOT displayed when the separated border model is used.

inherit - Empty cell attributes are inherited from the parent element.

show - Borders and backgrounds are displayed when the separated border model is used.

Default Value

Default value is set to show.

Inheritance

The empty-cells properties are inherited from the parent element if none are applied to the current element.

Browser Anomalies

IE5, IE6 and IE7 do not support the inherit property value.
IE8 does with a valid !DOCTYPE.
IE9+ supports the inherit property value.

Example



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<!-- Our HTML/CSS for the CSS empty-cells property follows -->
<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS 1/2 Reference - CSS empty-cells Property</title>

<!-- Valid values for CSS empty-cells Property are:
	
	hide, inherit and show 
	
--> 

<style type="text/css">

/* Show Empty Cells */
#table1 td {
  border: 1px solid black;
  background-color: orange;
  empty-cells: show;
}

/* Hide Empty Cells */
#table2 td {
  border: 1px solid black;
  background-color: orange;
  empty-cells: hide;
}
</style>
</head>

<body>
<h1>The empty-cells CSS property</h1>
<h2>Show Empty Cells</h2>
<table id="table1" border="1">
  <tr>
    <td>Banana</td>
    <td>Yellow</td>
  </tr>
  <tr>
    <td>Pea</td>
    <td></td>
  </tr>
</table>
<h2>Hide Empty Cells</h2>
<table id="table2" border="1">
  <tr>
    <td>Banana</td>
    <td>Yellow</td>
  </tr>
  <tr>
    <td>Pea</td>
    <td></td>
  </tr>
</table>
</body>
</html>

How It Looks

The results of using the empty-cells property with the values above will look something like the following:

notepad
CSS display    << Prev          Next >>   CSS float

go to home page Homepage go to top of page Top

CSS properties

The complete set of visual CSS properties from the latest 2.1 Specification.

Click the links for more information on individual properties and their values.