CSS empty-cells Property

This property specifies whether or not the borders in empty cells in a table should be displayed.

Syntax

empty-cells: show | hide | initial | inherit;

Example

<!DOCTYPE html>
<html>
<head>
<style>
    table, td, th {
        border: 1px solid #212b36;
    }
    .table1 {
        empty-cells: hide;
    }
    .table2 {
        empty-cells: show;
    }
</style>
</head>
<body>

<h2>empty-cells: hide</h2>
<table class="table1">
    <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Department</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Victor</td>
        <td>Computer Science</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Harry</td>
        <td></td>
    </tr>
</table>

<h2>empty-cells: show (default)</h2>
<table class="table2">
    <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Department</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Victor</td>
        <td>Computer Science</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Harry</td>
        <td></td>
    </tr>
</table>

</body>
</html>

Preview

Property Values

Value	Description
show	Borders should be displayed on empty cells. This is the default setting.
hide	Borders on empty cells should be hidden.
initial	This property is set to its default value.
inherit	This property is inherited from its parent element.

Supported Browsers

Element	Chrome	Firefox	Safari	Edge / IE	Opera
empty-cells	1.0	1.0	1.2	8.0	4.0

display

filter

CSS empty-cells Property

Syntax

Example

Property Values

Supported Browsers

Links

Tutorials

Connect with us