We'll understand CSS empty-cells property in this chapter.
The empty-cells property is used to set 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 value of separate.
For border-collapse property default value is separate.
CSS Syntax
empty-cells: show | hide | initial | inherit;
Let's see an example:
<!DOCTYPE html>
<html>
<head>
<style>
table {
empty-cells: hide;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td>HTML</td>
<td>PHP</td>
</tr>
<tr>
<td>CSS</td>
<td></td>
</tr>
</table>
</body>
</html>
Here is the result:
As you can see, we set it to be hidden in our example and you can see that borders and background are not shown in the picture above.
We set "show" in the second picture which you can see below and here is the result:
Property Values
Value | Descriptions |
---|---|
show | It means that the borders and background on empty cells will be shown. It is the default value of this property. |
hide | It means that the borders and background on empty cells won't be shown. |
initial | It makes the property use its default value. |
inherit | It inherits the property from its parents element. |