Refer to the link provided: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Tables
To conceal empty cells, use the rule empty-cells: hide;. This allows a cell's parent element background to shine through the cell if it is empty.
This method works smoothly except when applying border-collapse: collapse;. I came across an explanation on Why do the CSS property border-collapse and empty-cells conflict?, though the solution only hides the borders of those empty cells without displaying the parent element's background.
In this scenario, adding border-collapse to table#ok will cause the parent element's background to disappear, which should not happen.
For reference, see this example: http://jsfiddle.net/37m56vwb/1/
How can we explain this behavior and potentially fix it?
UPDATE
<table>
<tr>
<th></th>
<th></th>
<th>Header 3</th>
</tr>
<tr>
<th></th>
<th></th>
<th>Header 3</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td></td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td></td>
</tr>
</table>
<hr>
<table id="ok">
<tr>
<th></th>
<th></th>
<th>Header 3</th>
</tr>
<tr>
<th></th>
<th></th>
<th>Header 3</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td></td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td></td>
</tr>
</table>
CSS Styles:
table {
background: green;
border-collapse: collapse;
border-spacing: 0;
}
table#ok { border-collapse: separate; }
th, td {
background: blue;
empty-cells: hide;
border: solid 1px black;
padding: 2px 4px;
}
th:empty, td:empty {
border: 0;
}