CSS empty-cells Property

Posted in CSS Tutorial

Updated on Oct 02, 2024

By Mari Selvan

👁️ 25 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The empty-cells property in CSS is used to control the rendering of table cells that do not contain any content.

This property can be particularly useful when you want to ensure that empty cells are either shown or hidden, maintaining the visual consistency of your table layouts.

💡 Syntax

The syntax for the empty-cells property is simple and can be applied to table elements.

Syntax

Copied

element {
  empty-cells: value;
}

🎛️ Default Value

The default value of the empty-cells property is show, meaning that empty cells are displayed with their borders and background.

🏠 Property Values

Value	Description
show	This value ensures that empty cells are displayed with their borders and background.
hide	This value hides the borders and background of empty cells, making them invisible.

📄 Example

In this example, we'll demonstrate the effect of the empty-cells property on a table with some empty cells.

index.html

Copied

<!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: 100%;
    }
    td {
      border: 1px solid black;
      width: 50px;
      height: 50px;
    }
    .show-empty {
      empty-cells: show;
    }
    .hide-empty {
      empty-cells: hide;
    }
  </style>
</head>
<body>
  <h1>Table with Empty Cells</h1>
  <h2>empty-cells: show</h2>
  <table class="show-empty">
    <tr>
      <td>1</td>
      <td></td>
      <td>3</td>
    </tr>
    <tr>
      <td></td>
      <td>5</td>
      <td></td>
    </tr>
  </table>

  <h2>empty-cells: hide</h2>
  <table class="hide-empty">
    <tr>
      <td>1</td>
      <td></td>
      <td>3</td>
    </tr>
    <tr>
      <td></td>
      <td>5</td>
      <td></td>
    </tr>
  </table>
</body>
</html>

🖥️ Browser Compatibility

The empty-cells property is supported in all modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. It is also supported in older versions of Internet Explorer. However, it is always a good practice to test your website across different browsers to ensure compatibility.

🎉 Conclusion

The empty-cells property is a useful tool for web developers looking to control the display of empty table cells.

By choosing whether to show or hide these cells, you can maintain the desired visual structure of your tables. Experiment with this property to see how it can enhance the presentation of your tabular data.