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:

object.style.emptyCell="hide";

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:

Title one Title two
Row Title value value
Row Title value

 





Spacer Bottom Left Corner ImageBottom Right Corner Image
Valid XHTML 1.0 Strict  Valid CSS! Check the accessibility of this site according to U.S. Section 508