# CSS empty-cells Property
The CSS `empty-cells` property determines whether borders and backgrounds should be rendered around empty cells in a table.
---
## Introduction
In web design, tables often contain cells with no visible content. By default, browsers render borders and background colors for these empty cells. The `empty-cells` property allows developers to hide these empty cells, creating a cleaner and more professional layout.
> **Important Note:** This property only has an effect when the table's `border-collapse` property is set to `separate`. If the borders are collapsed (`border-collapse: collapse`), the `empty-cells` property is ignored.
---
## Syntax and Usage
```css
table {
border-collapse: separate;
empty-cells: show | hide | inherit;
}
```
### Property Values
| Value | Description |
| :--- | :--- |
| `show` | **Default.** Renders borders and backgrounds around empty cells. |
| `hide` | Hides borders and backgrounds around empty cells. If a row contains only empty cells, the entire row may be hidden. |
| `inherit` | Inherits the `empty-cells` value from the parent element. |
### Specifications
| Feature | Details |
| :--- | :--- |
| **Default Value:** | `show` |
| **Inherited:** | Yes |
| **CSS Version:** | CSS2 |
| **JavaScript Syntax:** | `object.style.emptyCells = "hide"` |
---
## Code Examples
### Example 1: Hiding Empty Cells
The following example demonstrates how to hide the borders and backgrounds of empty cells in a table.
```html
```
### Example 2: Comparing `show` vs `hide`
Below is a side-by-side comparison of how the browser renders empty cells with both values:
```css
/* Table A: Default behavior */
table.show-cells {
border-collapse: separate;
empty-cells: show;
}
/* Table B: Hidden empty cells */
table.hide-cells {
border-collapse: separate;
empty-cells: hide;
}
```
---
## Browser Support and Considerations
The `empty-cells` property is widely supported across all modern web browsers, including:
* Google Chrome
* Mozilla Firefox
* Apple Safari
* Microsoft Edge
* Opera
### Legacy Browser Note (Internet Explorer)
* Internet Explorer 8 and later versions support the `empty-cells` property only if a valid `` is declared at the top of the HTML document.
---
## Related Articles
* CSS Tutorial: (https://www.runoob.com/css/css-table.html)
YouTip