Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Usage of CSS empty-cells property
The empty-cells property specifies whether borders and backgrounds should be displayed for empty table cells. This property only works when border-collapse is set to separate.
Syntax
empty-cells: show | hide | inherit;
Values
- show - Default value. Borders and backgrounds are displayed for empty cells
- hide - Borders and backgrounds are hidden for empty cells
- inherit - Inherits the value from the parent element
Example: Hiding Empty Cells
<!DOCTYPE html>
<html>
<head>
<style>
table.empty {
width: 400px;
border-collapse: separate;
empty-cells: hide;
}
td.empty {
padding: 10px;
border: 2px solid #333;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<table class="empty">
<tr>
<th>Product</th>
<th>Price</th>
<th>Stock</th>
</tr>
<tr>
<td class="empty">Laptop</td>
<td class="empty">$999</td>
<td class="empty">15</td>
</tr>
<tr>
<td class="empty">Phone</td>
<td class="empty"></td>
<td class="empty">Out of Stock</td>
</tr>
</table>
</body>
</html>
Example: Showing Empty Cells
<!DOCTYPE html>
<html>
<head>
<style>
table.show-empty {
width: 400px;
border-collapse: separate;
empty-cells: show;
}
td.show-cell {
padding: 10px;
border: 2px solid #333;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<table class="show-empty">
<tr>
<th>Product</th>
<th>Price</th>
<th>Stock</th>
</tr>
<tr>
<td class="show-cell">Laptop</td>
<td class="show-cell">$999</td>
<td class="show-cell">15</td>
</tr>
<tr>
<td class="show-cell">Phone</td>
<td class="show-cell"></td>
<td class="show-cell">Out of Stock</td>
</tr>
</table>
</body>
</html>
Comparison
| Value | Empty Cell Border | Empty Cell Background | Use Case |
|---|---|---|---|
show |
Visible | Visible | Default behavior, maintains table structure |
hide |
Hidden | Hidden | Clean appearance, removes visual clutter |
Key Points
- Only works with
border-collapse: separate - Does not affect table layout or cell spacing
- Empty cells are those containing no content or only whitespace
- Commonly used in data tables with missing values
Conclusion
The empty-cells property provides control over the visual appearance of empty table cells. Use hide for cleaner data tables and show to maintain consistent table structure.
Updated on: 2026-03-15T23:18:59+05:30
172 Views
Advertisements