CSS empty-cells Property
The empty-cells property is used to set if the display borders and background should be shown or not on empty cells in a table.
This property applies to tables that have a border-collapse property with the value of "separate".
For border-collapse property, the default value is "show".
| Initial Value | show |
| Applies to | table-cell elements |
| Inherited | Yes. |
| Animatable | No |
| Version | CSS2 |
| DOM Syntax | object.style.emptyCells = "hide"; |
Syntax¶
empty-cells: show | hide | initial | inherit;Example of the empty-cells property:¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.show {
empty-cells: show;
}
.hide {
empty-cells: hide;
}
td,
th {
border: 1px solid #1c87c9;
padding: 0.5rem;
}
</style>
</head>
<body>
<h2>Empty-cells property example</h2>
<p>Here the "show" value is used: </p>
<table class="show">
<tr>
<td>Moe</td>
<td>Larry</td>
</tr>
<tr>
<td>Curly</td>
<td></td>
</tr>
</table>
<br>
<p>In this table the "hide" value is used:</p>
<table class="hide">
<tr>
<td>Moe</td>
<td>Larry</td>
</tr>
<tr>
<td>Curly</td>
<td></td>
</tr>
</table>
</body>
</html>With the help of the empty-cells property, CSS can check the HTML markup for the content that is inside of a table responding accordingly. You may use the empty-cells property in the cases when you don’t know whether a table will contain empty data points or not, deciding to hide these points. When you need to use a table for a presentation you can hide or show elements using with the help of this property.
Example of the empty-cells property with the "hide" and "show" values: ¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.show {
empty-cells: show;
}
.hide {
empty-cells: hide;
}
body {
background: #1c87c9;
padding: 25px 0;
color: #fff;
font-size: 2em;
text-align: center;
}
table {
display: flex;
justify-content: center;
}
td {
background: #fff;
border: 1px solid #8ebf42;
padding: 10px 15px;
color: green;
}
</style>
</head>
<body>
<p>The empty cells are shown</p>
<table class="show">
<tbody>
<tr>
<td>♦</td>
<td></td>
<td>♦</td>
<td>♦</td>
</tr>
</tbody>
</table>
<p>The empty cells are hidden</p>
<table class="hide">
<tbody>
<tr>
<td>♦</td>
<td></td>
<td>♦</td>
<td>♦</td>
</tr>
</tbody>
</table>
</body>
</html>Values¶
| Value | Description | |
|---|---|---|
| show | Means that the borders and background on empty cells will be shown. This the default value of this property. | |
| hide | Means that the borders and background on empty cells won't be shown. | |
| initial | Makes the property use its default value. | |
| inherit | Inherits the property from its parent's element. |
0 Comments
CAN FEEDBACK
Emoji