📊 CSS empty-cells: Control Borders & Backgrounds for Empty Table Cells

When working with HTML tables, sometimes your cells may be empty (contain no content). By default, browsers often render borders or backgrounds around these empty cells, which might not always look good or be what you want. The CSS empty-cells property gives you control over whether borders and backgrounds are shown on those empty table cells.

---

🧾 What is empty-cells?

The empty-cells property specifies if borders and backgrounds should be displayed on empty <td> or <th> table cells. It helps improve the visual clarity of tables by hiding unnecessary cell borders when the cells have no content.

---

🧬 Syntax

table {
  empty-cells: show | hide | inherit;
}

Values:

Value	Description
show	Render borders and backgrounds on empty cells (default behavior)
hide	Do not render borders or backgrounds on empty cells
inherit	Inherit the value from the parent element

---

🎯 Example: Hiding Borders on Empty Table Cells

HTML

<table border="1">
  <tr>
    <td>Filled cell</td>
    <td></td> <!-- Empty cell -->
  </tr>
  <tr>
    <td></td> <!-- Empty cell -->
    <td>Another filled cell</td>
  </tr>
</table>

CSS

table {
  empty-cells: hide;
}

Result: Borders and backgrounds for empty <td> cells are not shown, making the table look cleaner.

---

🧠 How It Works

• Only affects <td> and <th> elements inside <table>.
• When set to hide, if a cell is empty (no text, images, or child elements), its border and background won’t be rendered.
• Useful for sparse data tables or tables where empty cells should be visually ignored.

---

🛠️ Tips & Best Practices

• Use empty-cells: hide to improve readability of tables with many empty cells.
• Be cautious when hiding borders in tables used for layout purposes — it may affect the perceived structure.
• Combine with other table styling like border-collapse and border-spacing for fine-tuned control.
• Test across browsers — older browsers may handle empty-cells differently.

---

✅ Browser Support

Good support in all modern browsers and many older ones:

• ✅ Chrome
• ✅ Firefox
• ✅ Safari
• ✅ Edge
• ✅ Internet Explorer 8+

---

🔚 Conclusion

The CSS empty-cells property is a simple but handy tool for cleaning up the look of tables by controlling borders and backgrounds on empty cells. It can make your data tables easier to read and visually more appealing.

---