The empty-cells property sets borders on empty table cells.
The setting only affects the borders, not the space the cells occupy.
A table with empty-cells set to hide. Empty cells have no borders.
| First name | Last name |
|---|---|
| Denice | Hobermann |
| Paulo | Cornell |
| Jane |
<style>
table.tb { border-collapse: separate; width: 300px; empty-cells: hide; }
.tb th, .tb td { padding: 5px; border: solid 1px #777; }
.tb th { background-color: lightblue; }
</style>
<table class="tb">
<tr>
<th>First name</th>
<th>Last name</th>
</tr>
<tr>
<td>Denice</td>
<td>Hobermann</td>
</tr>
<tr>
<td>Paulo</td>
<td>Cornell</td>
</tr>
<tr>
<td>Jane</td>
<td></td>
</tr>
</table>
empty-cells: show | hide | initial | inherit;
| Value | Description |
|---|---|
| show | Default. Displays borders on empty cells |
| hide | Hide borders on empty cells |
| initial | Sets the value to its default value. |
| inherit | Inherits the value from its parent element. |
Click the buttons to see the different empty-cells values.
| First name | Last name |
|---|---|
| Denice | Hobermann |
| Paulo | Cornell |
| Jane |
<style>
table.tbl { border-collapse: separate;width: 300px;empty-cells: show; }
.tbl th, .tbl td { padding: 5px;border: solid 1px #777; }
.tbl th { background-color: lightblue; }
</style>
<table class="tbl">
<tr>
<th>First name</th>
<th>Last name</th>
</tr>
<tr>
<td>Denice</td>
<td>Hobermann</td>
</tr>
<tr>
<td>Paulo</td>
<td>Cornell</td>
</tr>
<tr>
<td>Jane</td>
<td></td>
</tr>
</table>
This table shows when empty-cells support started for each browser.
 Chrome
|
1.0 | Dec 2008 |
 Firefox
|
1.0 | Nov 2004 |
 IE/Edge
|
8.0 | Mar 2009 |
 Opera
|
4.0 | Jun 2000 |
 Safari
|
1.2 | Feb 2004 |
