CSS Empty-cells

The empty-cells property in CSS is used to control the display of borders and background in table cells that have no content. This property is particularly useful when you want to manage the appearance of empty table cells in a more visually appealing way.

Syntax

selector {
  empty-cells: value;
}

Try It Now

Values

  • show: This is the default value. It ensures that borders and background styles are applied to empty table cells. 
    table {
  empty-cells: hide;
}

    Try It Now

  • hide: This value hides the borders and background of empty table cells, making them invisible. 
    table {
  empty-cells: hide;
}

    Try It Now

  • inherit: The property value is inherited from its parent element.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS `empty-cells` Example</title>
  <style>
    table {
      border-collapse: collapse;
      width: 50%;
      border: 1px solid black;
    }

    td {
      border: 1px solid black;
      height: 50px;
      width: 50px;
      text-align: center;
    }

    .show-empty-cells {
      empty-cells: show;
    }

    .hide-empty-cells {
      empty-cells: hide;
    }
  </style>
</head>
<body>
  <h3>Table with `empty-cells: show` (default behavior)</h3>
  <table class="show-empty-cells">
    <tr>
      <td>1</td>
      <td>2</td>
      <td></td> <!-- Empty cell -->
    </tr>
    <tr>
      <td>3</td>
      <td></td> <!-- Empty cell -->
      <td>4</td>
    </tr>
  </table>

  <h3>Table with `empty-cells: hide`</h3>
  <table class="hide-empty-cells">
    <tr>
      <td>1</td>
      <td>2</td>
      <td></td> <!-- Empty cell -->
    </tr>
    <tr>
      <td>3</td>
      <td></td> <!-- Empty cell -->
      <td>4</td>
    </tr>
  </table>
</body>
</html>

Try It Now

Explanation

  • In the first table (empty-cells: show), empty cells are still outlined with borders and their backgrounds are visible.
  • In the second table (empty-cells: hide), the empty cells are invisible, as both the borders and background are hidden.

When to Use empty-cells

  • Consistent Design: Use empty-cells: show to maintain a uniform look, ensuring that all cells, even empty ones, are outlined.
  • Minimalist Design: Use empty-cells: hide when you want to create a cleaner look, hiding unnecessary borders for empty cells.

This property is particularly useful when dealing with dynamic content in tables where some cells might not have data. It helps maintain a cleaner and more organized visual appearance.