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

【问题标题】：Why do the CSS property border-collapse and empty-cells conflict?为什么 CSS 属性border-collapse 和empty-cells 会冲突？
【发布时间】：2020-02-06 23:08:51
【问题描述】：

我可以使用 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>

【问题讨论】：

回答你的问题标题，spec 没有定义empty-cells 在折叠边框模型中的行为。

标签： html css html-table

【解决方案1】：

@Bolt 解释了为什么会发生这种情况，我会为此提供解决方案，您可以在 CSS 中使用下面的 sn-p 来隐藏空单元格

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

Demo

使用:empty 伪，我设置了border: 0;，因此该元素在物理上出现在页面上，我们只针对空单元格的样式并将borders 设置为0。

我没有使用display: none;，因为它会破坏你的table布局，所以如果你想保持边框折叠，使用上面的sn-p就足够了。

注意：我使用的选择器是通用选择器，将全局定位，如果您想专门定位元素，请考虑使用class，而不是像

.table_class_name th:empty, 
.table_class_name td:empty { 
    /* Styles goes here */
}

【讨论】：

太好了，谢谢。 :empty 选择器就像我想要的那样工作。幸运的是，它可以从 IE9 获得，这是我项目的最低要求。 developer.mozilla.org/en-US/docs/Web/CSS/:empty
@LonelyPixel 欢迎您，即使您想支持旧版本，也可以查看 - selectivizr.com

【解决方案2】：

这是我发现的一个技巧，你可以单独使用border-collapse。然后在表格中将边框间距定义为 0px，然后将 td 中的填充定义为 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; 
}

【讨论】：