CSS empty-cells

The CSS empty-cells property is used when we need to hide the border around all empty cells in a table. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      th, td{border: 1px solid red;}
      
      table.tableOne{empty-cells: hide;}
      table.tableTwo{empty-cells: show;}
   </style>
</head>
<body>

   <h2>empty-cells: hide</h2>
   <table class="tableOne">
      <tr>
        <th>Name</th>
        <th>City</th>
      </tr>
      <tr>
        <td>Charlotte</td>
        <td>Birmingham</td>
      </tr>
      <tr>
        <td>Lucas</td>
        <td></td>
      </tr>
    </table>
    
    <h2>empty-cells: show</h2>
    <table class="tableTwo">
      <tr>
        <th>Name</th>
        <th>City</th>
      </tr>
      <tr>
        <td>Charlotte</td>
        <td>Birmingham</td>
      </tr>
      <tr>
        <td>Lucas</td>
        <td></td>
      </tr>
    </table>
   
</body>
</html>

Output

empty-cells: hide

Name	City
Charlotte	Birmingham
Lucas

empty-cells: show

Name	City
Charlotte	Birmingham
Lucas

Note - The empty-cells: hide has no effect if border-collapse: collapse is defined.

CSS empty-cells Syntax

The syntax of empty-cells property in CSS, is:

empty-cells: x;

The value of x should be any of the following:

hide - Used to hide borders around all empty cells
show - Used not to hide borders around all empty cells. This is the default value
initial - Used to use the default value
inherit - Used to use the value inherited by the parent element

CSS Online Test

« Previous Tutorial Next Tutorial »