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

Question

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

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

它运行良好，但设置border-collapse: collapse; 时却不行。 我找到了Why do the CSS property border-collapse and empty-cells conflict?，但答案只是隐藏了空单元格的边框，并且没有显示父元素的背景。

在这个示例中，如果我们将border-collapse 添加到父元素的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 规范中提到了隐藏单元格不显示的原因。 Border-collapse 忽略了 th 或 td 被隐藏的事实。基本上，通过折叠边框，会导致空单元格：隐藏被忽略 - 因此显示 th 和 td 的正常背景。 http://www.w3.org/TR/CSS2/tables.html#propdef-empty-cells

当使用边框折叠时，W3 Schools 说：边框会尽可能折叠成单个边框（边框间距和空单元格属性将被忽略）http://www.w3schools.com/cssref/pr_border-collapse.asp 或在此处阅读 W3.org 的规范：@987654323 @