CSS - empty-cells Property

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

Syntax

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

Property Values

Value	Description
show	It shows the borders on empty cells. Default value.
hide	It hides the borders on empty cells.
initial	It sets the property to its default value.
inherit	It inherits the property from the parent element.

Examples of CSS Empty Cells Property

The following examples explain the empty-cells property with different values.

Empty Table Cells with Borders

To let the empty cells of a table have borders, we use the show value which is the default value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      table {
         padding: 4px;
         empty-cells: show;
      }
   </style>
</head>

<body>
   <h2>
      CSS empty-cells property
   </h2>
   <h4>
      empty-cell: show ( see the places 
      without values have borders)
   </h4>
   <table border=1 cellpadding=30>
      <tr>
         <td>
            1
         </td>
         <td>
            2
         </td>
         <td>
         </td>
      </tr>
      <tr>
         <td>
            4
         </td>
         <td>
         </td>
         <td>
            6
         </td>
      </tr>
      <tr>
         <td>
         </td>
         <td>
            8
         </td>
         <td>
            9
         </td>
      </tr>
   </table>

</body>

</html>

Empty Table Cells without Borders

To not let the empty cells of a table have borders, we use the hide value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      table {
         padding: 4px;
         empty-cells: hide;
      }
   </style>
</head>

<body>
   <h2>
      CSS empty-cells property
   </h2>
   <h4>
      empty-cell: hide ( see the places without
      values do not have borders)
   </h4>
   <table border=1 cellpadding=30>
      <tr>
         <td>
            1
         </td>
         <td>
            2
         </td>
         <td>
         </td>
      </tr>
      <tr>
         <td>
            4
         </td>
         <td>
         </td>
         <td>
            6
         </td>
      </tr>
      <tr>
         <td>
         </td>
         <td>
            8
         </td>
         <td>
            9
         </td>
      </tr>
   </table>

</body>

</html>

Supported Browsers

Property
empty-cells	1.0	8.0	1.0	1.2	4.0

css_reference.htm