边框折叠和空单元格不能正常工作

Question

来源https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Tables

可以通过指定空单元格来隐藏它们：hide；。然后，如果一个细胞父元素有一个背景，它通过空单元格显示。

它工作得很好，但当设置为border-collapse: collapse;时就不行了。我发现为什么CSS属性边界崩溃和空单元格冲突？但答案只是隐藏了空单元格的边界，并且没有显示父元素的背景。

在这个示例中，如果我们将边框折叠添加到父元素的table#ok背景中，它会隐藏自己，但不应该。

http://jsfiddle.net/37m56vwb/1/

如何解释这种行为，以及在可能的情况下如何修复它？

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>

和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

您可以添加

background:transparent;

至

th:empty, td:empty {
    border: 0;
}

W3.org规范中提到了隐藏单元格无法显示的原因。边框折叠忽略了th或td被隐藏的事实。基本上，通过折叠边框，可以忽略空单元格：hide，从而显示th和td的正常背景。http://www.w3.org/TR/CSS2/tables.html#propdef-空单元格

W3学校表示，在使用边框折叠时：尽可能将边框折叠为一个边框（边框间距和空单元格属性将被忽略）http://www.w3schools.com/cssref/pr_border-collapse.asp或者在此处阅读W3.org的规范：http://w3.org/TR/CSS2/tables.html#img-tbl空