CSS empty-cells property
The empty-cells property in CSS is known for setting whether the borders and backgrounds appear around the table cells, having no visible content. This property has an effect only if the border-collapse is separate.
The empty-cells property is specified as one of these keyword values: show or hide. In the case of show, borders, and backgrounds are drawn just like as in normal cells, and in the case of hide, no borders or backgrounds are drawn.
Syntax for the empty-cells property:
Following is the syntax for the empty-cells property.
show | hide
Example: CSS empty-cells property
Here in the example below, we are using the empty-cells property with different table borders, colors, and their different values. In this case, we have given the empty-cells value as hide and show.
<!DOCTYPE html>
<html>
<head>
<title>The empty-cells function in CSS</title>
<style type="text/css">
.table_1 {
empty-cells: show;
background-color: purple;
}
.table_2 {
empty-cells: hide;
background-color: pink;
}
td,
th {
border: 1px solid gray;
padding: 0.5rem;
}
</style>
</head>
<body>
<table class="table_1">
<tr>
<td>RED</td>
<td>YELLOW</td>
</tr>
<tr>
<td>PURPLE</td>
<td></td>
</tr>
</table>
<br>
<table class="table_2">
<tr>
<td>BLACK</td>
<td>YELLOW</td>
</tr>
<tr>
<td>PURPLE</td>
<td></td>
</tr>
</table>
</body>
</html>
Output:
Example 2: CSS empty-cells property
Here in the example below, we are using the empty-cells property with different table borders, colors, and their different values. In this case, we have given the empty-cells value as show.
<!DOCTYPE html>
<html>
<head>
<title>The empty-cells function in CSS</title>
<style type="text/css">
.table_1 {
empty-cells: show;
background-color: skyblue;
}
.table_2 {
empty-cells: show;
background-color: pink;
}
td,
th {
border: 1px solid gray;
padding: 0.5rem;
}
</style>
</head>
<body>
<table class="table_1">
<tr>
<td>RED</td>
<td>YELLOW</td>
</tr>
<tr>
<td>PURPLE</td>
<td></td>
</tr>
</table>
<br>
<table class="table_2">
<tr>
<td>BLACK</td>
<td>YELLOW</td>
</tr>
<tr>
<td>PURPLE</td>
<td></td>
</tr>
</table>
</body>
</html>
Output:
Live Example
Here in this live example, you can test the code and execute the example using different values or even edit the code example.
Browser Compatibility
There are many browsers that do not support all the latest CSS properties. Hence, while developing any webpage, if you are using any CSS property you must check the browser compatibility for that CSS property and then use it. It is of immense importance today when there is a large variety of web browsers available.
| Name of Browser |
Background size |
contain and cover |
| Chrome |
1 |
1 |
| Edge |
12 |
12 |
| Firefox |
1 |
1 |
| Internet Explorer |
8 |
8 |
| Opera |
4 |
4 |
| Safari |
1.2 |
1.2 |
| Webview Android |
1 |
1 |
| Chrome Android |
18 |
18 |
| Firefox Android |
4 |
4 |
| Opera Android |
10.1 |
10.1 |
| IOS Safari |
3.1 |
3.1 |
| Samsung Internet |
1.0 |
1.0 |
Conclusion
The initial value for the empty-cells property in CSS is show. This property is applicable to the table-cell elements. It is an inherited property. The computed value for this property is the as specified one. The animation type for this property is discrete.
