CSS table empty-cell property
CSS Table empty-cell Property
Description
The empty-cell property is used to control the rendering of table cells with no visible content in the border-only table layout model.
Optional Values
- show – Renders a border around empty cells.
-
hide – Do not draw borders on empty cells.
Applies to
All elements with the display property set to table-cell.
DOM Syntax
object.style.emptyCell = "hide";
Example
This is the empty-cells property, which is used to hide the borders of empty cells in the <table> element.
<html>
<head>
<style type = "text/css">
table.empty {
width:350px; border-collapse:separate;
empty-cells:hide;
}
td.empty {
padding:5px;
border-style:solid;
border-width:1px;
border-color:#999999;
}
</style>
</head>
<body>
<table class = "empty">
<tr>
<th></th>
<th>Title one</th>
<th>Title two</th>
</tr>
<tr>
<th>Row Title</th>
<td class = "empty">value</td>
<td class = "empty">value</td>
</tr>
<tr>
<th>Row Title</th>
<td class = "empty">value</td>
<td class = "empty"></td>
</tr>
</table>
</body>
</html>
This will produce the following result −
