CSS - empty-cell



The empty-cell property in CSS is used to control the rendering of cells in a table that have no content or are otherwise considered "empty." It only applies to tables and table cells.

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 | show";

Example

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

<html>
<head>
<style>
   table.empty {
      width: 350px;
      border-collapse: separate;
      empty-cells: hide;
   }
   table.show {
      width: 350px;
      border-collapse: collapse;
      empty-cells: show;
   }
   td.empty {
      padding:5px;
      border-style:solid;
      border-width:1px;
      border-color:#999999;
   }  
</style>
</head>
<body>
   <div>
      <h2>empty-cell: hide</h2>
      <table class = "empty">
         <tr>
            <th></th>
            <th>Header 1</th>
            <th>Header 2</th>
         </tr>
         <tr>
            <th>Title</th>
            <td class = "empty">Data 1</td>
            <td class = "empty">Data 2</td>
         </tr>
         <tr>
            <th>Title</th>
            <td class = "empty">Data 1</td>
            <td class = "empty"></td>
         </tr>
      </table>
   </div>
   <div>
      <h2>empty-cell: show</h2>
      <table class = "show">
         <tr>
            <th></th>
            <th>Header 1</th>
            <th>Header 2</th>
         </tr>
         <tr>
            <th>Title</th>
            <td class = "empty">Data 1</td>
            <td class = "empty">Data 2</td>
         </tr>
         <tr>
            <th>Title</th>
            <td class = "empty">Data 1</td>
            <td class = "empty"></td>
         </tr>
   </table>
   </div>
</body>
</html> 
Advertisements