如何使用 CSS 隐藏表格中空单元格的边框和背景？

在 HTML 表格中，如果单元格为空，可能会出现不必要的边框和背景，影响页面的美观性和可读性。本文将介绍如何使用 CSS 隐藏表格中空单元格的边框和背景。

方案一：设置单元格为空时的样式

我们可以使用伪类 :empty 来选取空单元格，再通过设置 border 和 background 属性来隐藏边框和背景。代码如下：

td:empty {
  border: none;
  background: transparent;
}

这种方案的缺点是只能处理完全为空的单元格，如果单元格中有空格符或者换行符等内容，仍然会有边框和背景。

方案二：设置单元格的内容为无害字符

为了避免方案一的缺点，我们可以在单元格中插入无害字符以占据空单元格。比较常用的无害字符有   和 ​，前者代表不间断空格，后者代表零宽空格。这样就可以通过 CSS 选取空单元格，进而隐藏边框和背景。代码如下：

td:empty:before {
  content: "\00a0"; /* 或是 "\200b" */
  display: block;
  height: 0;
  visibility: hidden;
}

通过伪元素 :before 在单元格前面插入无害字符，通过设置 display 和 visibility 属性隐藏无害字符，就可以达到隐藏边框和背景的效果了。

方案三：设置单元格内容为  

还有一种方法是直接在单元格中插入  ，即不间断空格。代码如下：

<td>&nbsp;</td>

这种方法比较简单，但是如果需要在多个单元格中插入  ，就比较繁琐。

总结

本文介绍了三种方法来隐藏表格中的空单元格的边框和背景。其中方案一只能处理完全为空的单元格，方案二需要在单元格中插入无害字符，方案三直接在单元格中插入  。选择哪种方法需要根据具体情况而定。

参考链接：

• CSS Hide Empty TDs with No Borders or Backgrounds