如何使用CSS高亮显示非空表格单元格

当然有办法啦！下面分两种场景给你介绍实用方案：

一、纯CSS快速实现（近似匹配） #

如果你的表格里“空单元格”是完全没有内容（连空格、换行都没有），那直接用CSS伪类就能快速搞定：

td:not(:empty) {
  background-color: #e8f4fd; /* 浅蓝色高亮，可自行调整颜色 */
  font-weight: 500;
}

这个方案的优点是零JS、超简单，但有个小局限：如果单元格里只有空格、特殊符号（比如-、*）这类非字母数字内容，也会被高亮。要是你的业务场景里这种情况很少，这个方案完全够用。

二、精准匹配字母数字（结合少量JS） #

如果需要严格只高亮**包含字母（a-z/A-Z）或数字（0-9）**的非空单元格，纯CSS暂时没法直接识别文本内容的正则规则，不过我们可以用几行JS配合CSS实现精准控制：

步骤1：给符合条件的单元格添加类名 #

document.querySelectorAll('td').forEach(cell => {
  const cleanContent = cell.textContent.trim();
  // 正则匹配是否包含至少一个字母或数字
  if (/[a-zA-Z0-9]/.test(cleanContent)) {
    cell.classList.add('has-alphanumeric');
  }
});

步骤2：用CSS给目标类添加高亮样式 #

td.has-alphanumeric {
  background-color: #d4edda; /* 浅绿色高亮 */
  border-left: 3px solid #28a745; /* 左侧加标识线，增强辨识度 */
}

这个方案能精准定位到目标单元格，而且代码量小、容易维护。如果你的表格是动态渲染的（比如后端异步加载数据），记得在数据渲染完成后再执行上面的JS代码哦。

内容的提问来源于stack exchange，提问作者Max