CSS empty-cells PropertyS2C Home « 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>
<!-- Our HTML/CSS for the CSS empty-cells property follows -->
<html lang="en">
<head>
<title>CSS 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:
Homepage
Top