Empty Cells Property
Last updated: 2026-09-13
empty-cells Empty Cells Property
empty-cells controls whether empty cells (cells with no content or only whitespace) show their borders and background. The default show renders them normally; hide hides them for a cleaner look. The property only applies to tables with border-collapse: separate.
| Category | |
|---|---|
| Initial Value | show |
| Inherited | Yes |
| Applies To | |
| Animation Type | |
| CSS Version | CSS2 |
| Status | Standard |
📝 Syntax
empty-cells: show | hide;⚙️ Values
| Value | Type | Description |
|---|---|---|
show | hide | Keyword | Empty cell borders |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| empty-cells | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： empty-cells requires border-collapse: separate; it has no effect with border-collapse: collapse.
❓ FAQ
QHow do show and hide affect a table's appearance?
Ashow (the default): empty cells keep their borders and background, so the grid stays complete and continuous. hide: the borders and background of empty cells disappear, creating visual 'holes' that look cleaner and suit sparse data. Note that hide only removes borders and background — the cell itself and its width still occupy space, so layout is unaffected.
QWhy doesn't empty-cells: hide have any effect?
ACheck whether border-collapse is separate. empty-cells only works with border-collapse: separate (the default); if the table sets border-collapse: collapse, the property is ignored. This is the most common cause of failure — switch to separate and it works.
QWhat is the browser support for empty-cells?
ASupport is excellent — every mainstream browser, including IE, supports it; it is a CSS 2.1 property. The only caveat is that it needs border-collapse: separate. Confirm the table's border-collapse state and no prefix is needed.
QHow do I tell whether a cell is 'empty'?
AAn empty cell has no content or only whitespace (spaces, newlines). Note that (non-breaking space) counts as content, so empty-cells: hide will not apply; a cell containing a child element (even an empty div) is not empty either. To force-hide such 'pseudo-empty' cells, clean up the whitespace inside them first.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
table-layout Property
Control the table layout algorithm
border-collapse Property
Control table border collapsing
