Question

我可以使用CSS属性border-collapse来组合相邻表格单元格的边框。我可以使用empty-cells来隐藏没有内容的表格单元格。但是当我同时使用它们时，empty-cells属性没有效果，并且空单元格始终可见。至少每个都有一个边框，即使多个相邻的行和列都是空的。

以下是一个例子：

<!doctype html>
<html>
<head>
<style>
table
{
    border-collapse: collapse;
    border-spacing: 0;
}
th,
td
{
    empty-cells: hide;
    border: solid 1px black;
    padding: 2px 4px;
}
</style>
</head>

<body>
<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>
</body>
</html>

Answer 1

由于@Bolt解释了为什么会发生这种情况，我会为此提供解决方案，您可以在CSS中使用以下代码段隐藏空单元格

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

Demo

使用:empty伪，我设置border: 0;以便物理上元素出现在页面上，我们只是定位空单元格的样式并将borders设置为{{1 }}

我没有使用0，因为它会破坏您的display: none;版面，因此如果您想要保持边框折叠，使用上面的代码就足够了。

注意：使用的选择器是一般选择器并且将全局定位，如果您想要专门定位该元素，请考虑使用table而不是

class

Answer 2

这是我发现的一个技巧，您可以将border-collapse单独使用。然后在表格中将border-spacing定义为0px，然后在td中将padding定义为0px。

table
{ 
	empty-cells: hide; 
	border-collapse: separate;
	border-spacing: 0px;	
}

td
{	
	border: thin solid black;
	text-align: right; 
	padding: 0px;
}

th 
{	
	border: thin solid black;
	background-color: yellow; 
}

为什么CSS属性border-collapse和empty-cells冲突？

2 个答案: