CSS/Properties/empty-cells
From W3C Wiki
< CSS | Properties
Contents |
empty-cells
The empty-cells property controls the rendering of borders and backgrounds around cells that have no visible content.
Description
| Values | show | hide | inherit |
|---|---|
| Initial value | show |
| Applies to | 'table-cell' elements |
| Inherited | Yes |
Values
show
Borders and backgrounds are drawn around/behind empty cells.
hide
No borders or backgrounds are drawn around/behind empty cells.
inherit
Takes the same specified value as the property for the element's parent.
Example
Example A
[style.css]
table{
border-width: 1px;
border-style: solid;
border-collapse: separate;
width: 400px;
}
#sh{
empty-cells: show;
margin-bottom: 20px;
}
#hi{
empty-cells: hide;
}
tr, th, td{
border-width:1px;
border-style: solid;
}
[index.html]
<body>
<table id="sh">
<caption>Example 1. Show</caption>
<tr>
<th>Values</th>
<td>top | bottom | inherit</td>
</tr>
<tr>
<th>Initial value</th>
'''<td></td>'''
</tr>
</table>
<table id="hi">
<caption>Example 2. Hide</caption>
<tr>
<th>Values</th>
<td>top | bottom | inherit</td>
</tr>
<tr>
<th>Initial value</th>
'''<td></td>'''
</tr>
</table>
</body>
CSS Reference
The CSS specification defines the empty-cells property in 17.6.1.1 Borders and Backgrounds around empty cells.
