border-collapse and empty-cells doesn't work properly together - html

Question

From https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Tables
You can hide them by specifying empty-cells: hide;. Then, if a cell's
parent element has a background, it shows through the empty cell.
It works well but when set border-collapse: collapse; it doesn't.
I found Why do the CSS property border-collapse and empty-cells conflict? but the answer just hide border of empty cells and it doesn't show a background of a parent element.
In this sample if we add border-collapse to table#ok background of parent element will hide itself but it shouldn't.
http://jsfiddle.net/37m56vwb/1/
How to explain this behavior and how to fix it if possible?
UPD
<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>
and css:
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;
}

Answer 1

You can add
background:transparent;
to
th:empty, td:empty {
border: 0;
}
The reason the hidden cells don't show through is mentioned in the W3.org spec. Border-collapse ignores the fact that the th or td was hidden. Basically, by you collapsing the borders, you are causing the empty-cells:hide to be ignored -- and therefore the normal background of the th and td are being shown.
http://www.w3.org/TR/CSS2/tables.html#propdef-empty-cells
When using border-collapse, W3 Schools says: borders are collapsed into a single border when possible (border-spacing and empty-cells properties will be ignored) http://www.w3schools.com/cssref/pr_border-collapse.asp Or read the spec from W3.org here: http://w3.org/TR/CSS2/tables.html#img-tbl-empty