Tutorials Point


  CSS Home

  CSS Reference
  Pseudo Classes & Elements

Copyright © 2014 by tutorialspoint



  Home     References     Discussion Forums     About TP  

CSS - empty-cell


previous next AddThis Social Bookmark Button


Advertisements

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

To Become more comfortable - Do Online Practice



previous next Printer Friendly

Advertisements


  

Advertisements