📌 Introduction

The empty-cells property in CSS controls whether borders and backgrounds are displayed on table cells that contain no content. This property applies only to table elements built with<table>, <tr>, and<td>. It is especially useful when designing clean, minimal, or grid-like table layouts. ✨

🎯 What Does empty-cells Do?

✨ Syntax

selector {
  empty-cells: show | hide;
}

🧩 Available Values

1. show (default)

Empty cells will still display borders and background.

empty-cells: show;

2. hide

Empty cells will not show any borders or background → they appear visually removed.

empty-cells: hide;

🔥 Practical Examples

1. Default Behavior (show)

table {
  border: 1px solid #333;
  border-collapse: separate; /* required */
  empty-cells: show;
}

2. Hiding Empty Cells

table {
  border: 1px solid #333;
  border-collapse: separate; /* required */
  empty-cells: hide;
}

3. Example Table Markup

<table>
  <tr>
    <td>1</td>
    <td></td>  <!-- Empty -->
    <td>3</td>
  </tr>
  <tr>
    <td></td>  <!-- Empty -->
    <td>5</td>
    <td></td>  <!-- Empty -->
  </tr>
</table>

4. Useful for Calendar UI

hide empty cells to create cleaner layouts for calendars or scheduling grids.

.calendar {
  border-collapse: separate;
  empty-cells: hide;
  border-spacing: 5px;
}

📊 Behavior Table

🧠 Important Notes

🎉 Conclusion

The empty-cells property lets you enhance the appearance of table layouts by controlling how empty cells are rendered. Whether you're designing clean calendars or simple data tables, this property helps remove visual clutter and gives you more control over table design. 🚀