The empty-cells
CSS property sets whether borders and backgrounds appear around <table>
cells that have no visible content.
empty-cells
Try it
This property has an effect only when the border-collapse
property is separate
.
Syntax
/* Keyword values */ empty-cells: show; empty-cells: hide; /* Global values */ empty-cells: inherit; empty-cells: initial; empty-cells: revert; empty-cells: revert-layer; empty-cells: unset;
The empty-cells
property is specified as one of the keyword values listed below.
Values
-
show
-
Borders and backgrounds are drawn like in normal cells.
-
hide
-
No borders or backgrounds are drawn.
Formal definition
Initial value | show |
---|---|
Applies to | table-cell elements |
Inherited | yes |
Computed value | as specified |
Animation type | discrete |
Formal syntax
show | hide
Example
Showing and hiding empty table cells
HTML
<table class="table_1"> <tr> <td>Moe</td> <td>Larry</td> </tr> <tr> <td>Curly</td> <td></td> </tr> </table> <br> <table class="table_2"> <tr> <td>Moe</td> <td>Larry</td> </tr> <tr> <td>Curly</td> <td></td> </tr> </table>
CSS
.table_1 { empty-cells: show; } .table_2 { empty-cells: hide; } td, th { border: 1px solid gray; padding: 0.5rem; }
Result
Specifications
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
empty-cells |
1
|
12
|
1
|
8
|
4
|
1.2
|
1
|
18
|
4
|
10.1
|
1
|
1.0
|
See also
© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/empty-cells