Question

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

您可以通过指定empty-cells隐藏它们：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规范中提到了隐藏单元格未显示的原因。边界崩溃忽略了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中的规范： http://w3.org/TR/CSS2/tables.html#img-tbl-empty

border-collapse和empty-cells不能正常工作

1 个答案: