No Login Data Private Local Save

empty‑cells CSS Property Demo - Online Table Visibility

16
0
0
0

CSS empty-cells Property Demo

Interactive demonstration of how empty-cells controls the visibility of empty table cell borders and backgrounds. Edit cells, toggle modes, and see the real-time difference between show and hide.

CSS2.1 Property Visual Demo Editable Cells Responsive
Controls:
Empty cells: 4 Filled cells: 12 Click any cell to edit
empty-cells: show (default) Click cells to edit
Name Math English Science
Alice 85 92
Bob 78 88
Charlie 90
Diana 76 85 91
empty-cells: hide Empty cells are invisible
Name Math English Science
Alice 85 92
Bob 78 88
Charlie 90
Diana 76 85 91 
/* Table with empty-cells: show (default) */
table {
  empty-cells: show;
  border-collapse: separate;
  border-spacing: 6px;
}

/* Table with empty-cells: hide */
table {
  empty-cells: hide;
  border-collapse: separate;
  border-spacing: 6px;
}
Important: The empty-cells property only works with border-collapse: separate (the default). When border-collapse: collapse is active, empty-cells has no effect — both tables will look identical. Toggle the "Collapse Borders" switch above to see this in action. Also note: a cell containing   or any whitespace is not considered empty.

Frequently Asked Questions

The empty-cells CSS property controls whether borders and backgrounds are rendered around empty table cells (cells with no visible content). It applies to <td> and <th> elements within a table that uses border-collapse: separate. This property is part of the CSS 2.1 specification and is supported by all modern browsers.

It accepts two keyword values:

  • show (default) — Empty cells display their borders and backgrounds normally, just like filled cells.
  • hide — Empty cells' borders and backgrounds are completely hidden, making the cell appear invisible (though it still occupies space in the layout).

A cell is considered empty only if it contains absolutely no content — no text, no child elements, no &nbsp;, and no whitespace characters (including spaces and line breaks). Even a single &nbsp; or a zero-width space makes the cell "non-empty," and empty-cells: hide will not hide it. The browser checks the cell's inner content; if textContent.trim() is '', it's empty.

No. The empty-cells property only takes effect when border-collapse: separate is set (which is the default for HTML tables). In collapse mode, borders are merged into a single border between adjacent cells, and the concept of individual cell borders doesn't apply — so empty-cells is ignored entirely. Use the toggle switch in the demo above to verify this behavior.

Use the CSS declaration empty-cells: hide; on your <table> element, and ensure border-collapse: separate; is active. For even more control, you could use JavaScript to detect empty cells and apply visibility: hidden; or remove them from the DOM entirely. However, empty-cells: hide is the simplest, native CSS solution for hiding borders and backgrounds of empty cells while preserving table structure.

Common scenarios include:

  • Data tables with sparse/missing data — making empty cells visually recede so users focus on filled data.
  • Dashboard or report tables — where certain metrics may not apply to all rows.
  • Calendar-style layouts — hiding days that don't belong to the current month.
  • Print stylesheets — reducing visual clutter when printing tables with optional fields.

empty-cells has excellent browser support. It is supported in all major browsers including Chrome, Firefox, Safari, Edge, and Opera — going back to IE8+. It's a stable CSS 2.1 feature that you can safely use in production without vendor prefixes or fallbacks.

No. empty-cells is a discrete property — it only accepts keyword values (show or hide) with no intermediate states, so CSS transitions and animations cannot interpolate between them. The change is instantaneous. If you need a smooth fade effect for hiding empty cells, you would need to use JavaScript with opacity or visibility transitions instead.

🔧 Related Tools