CSS - empty-cell


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.

<html>
   <head>
   
      <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>
      
   </head>
   <body>
   
      <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>
      
   </body>
</html> 

This will produce following result −



Advertisements