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 | 3.1 | X |
Last updated by CSSPortal on: 26th October 2019