我可以使用 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>最佳答案
如@Bolt解释了为什么会发生这种情况，我将为此提供一个解决方案，您可以在 CSS 中使用以下代码片段来隐藏空单元格
th:empty, td:empty {
border: 0;
}
使用:empty伪，我设置了border: 0;所以物理上该元素出现在页面上，我们只需定位空单元格的样式并设置边框到0。
我没有使用 display: none; 因为它会破坏您的 table 布局，因此如果您想保持边框折叠，使用上面的代码片段就足够了。
注意:我使用的选择器是通用选择器，将全局定位，如果您想专门定位元素，请考虑使用 class 代替，如
.table_class_name th:empty,
.table_class_name td:empty {
/* Styles goes here */
}
关于html - 为什么CSS属性border-collapse和empty-cells会冲突？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18758373/