CSS - empty-cell

Description:

The empty-cell property is used in the separate-border table layout model to control the rendering of table cells which have no visible content.

Possible Values:

• show: The borders of an empty cell are rendered.
• hide: The borders of an empty cell are not drawn.

Applies to:

All the elements with a display of table-cell

DOM Syntax:

Example:

Here is the empty-cells property used to hide borders of empty cells in the <table> element.

<style type="text/css">
table.empty{
    width:350px;
    border-collapse:separate;
    empty-cells:hide;
}
td.empty{
    padding:5px;
    border-style:solid;
    border-width:1px;
    border-color:#999999;
}
</style>
<table class="empty">
<tr>
<th></th>
<th>Title one</th>
<th>Title two</th>
</tr>
<tr>
<th>Row Title</th>
<td class="empty">value</td>
<td class="empty">value</td>
</tr>
<tr>
<th>Row Title</th>
<td class="empty">value</td>
<td class="empty"></td>
</tr>
</table>
     

This will produce following result: