Empty-cells

We'll understand CSS empty-cells property in this chapter.

The empty-cells property is used to set the display borders and background should be shown or not on empty cells in a table.

This property applies to tables that have a border-collapse property value of separate.

For border-collapse property default value is separate.

CSS Syntax

empty-cells: show | hide | initial | inherit;

Let's see an example:

<!DOCTYPE html>
<html>
   <head>
      <style>
         table {             
           empty-cells: hide;
         }
      </style>
   </head>

   <body>
      <table border="1">
          <tr>
            <td>HTML</td>
            <td>PHP</td>
          </tr>
          <tr>
            <td>CSS</td>
            <td></td>
          </tr>
      </table>
   </body>
</html>

Here is the result:

As you can see, we set it to be hidden in our example and you can see that borders and background are not shown in the picture above.

We set "show" in the second picture which you can see below and here is the result:

Property Values

Value Descriptions
show It means that the borders and background on empty cells will be shown. It is the default value of this property.
hide It means that the borders and background on empty cells won't be shown.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.


Prev
Next