empty-cells: hide 无效主因是 border-collapse: collapse，该属性仅在 separate 模式下生效；且“空”指 dom 内容树完全为空（无空格、换行、子元素、注释），非肉眼判断。

empty-cells: hide 为什么没反应

直接写 empty-cells: hide 却看不到效果？大概率是表格用了 border-collapse: collapse。CSS 规范白纸黑字写着：这个属性只在 border-collapse: separate 模式下生效，collapse 下浏览器会直接忽略它。

常见踩坑点：

• Bootstrap、Element Plus 等 UI 库默认全局设了 table { border-collapse: collapse; }，你写的局部样式被覆盖了
• 开发者工具里看到的 border-collapse 是 collapse，但你没显式声明 separate，所以 empty-cells 根本不启动
• 写了 border: 1px solid #ccc 却没配 border-collapse: separate，简写不会自动切换模式

空单元格到底得“空”到什么程度

empty-cells: hide 的“空”，不是肉眼看着空——它要求 DOM 内容树完全为空：不能有文本节点（包括空格、换行）、不能有子元素、不能有注释。

这些都不算空：

• <td> </td>（含空格）→ 边框照常显示
• <td>\n</td>（含换行）→ 不触发隐藏
• <td> </td> 或 <td></td> 后面跟着 JS 插入的 "" → 仍算非空

真正有效的只有：<td></td>，且标签之间不能有任何空白字符。模板渲染（Vue/React）里 <td>{{ val }}</td> 很容易带换行，建议用 v-text 或 dangerouslySetInnerHTML 控制输出干净内容。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

隐藏后还有“白块”或“间距”，怎么办

empty-cells: hide 只跳过边框和背景的绘制，不碰 padding、height、background-color。所以你看到的“残留”，其实是单元格自身的内边距或继承的背景色。

典型表现和对策：

• 单元格周围有明显空白 → 加 td { padding: 0; }
• 整行背景色透出，像漏了一块 → 检查是否给 td 单独设了 background，统一设为 transparent 或删掉
• 用开发者工具选中空 <td>，看 computed 样式里 <code>border 是否为 none、background-image 是否为 none

  border-collapse: collapse 下怎么替代实现

  一旦用了 border-collapse: collapse（绝大多数现代布局都需要它），empty-cells 就彻底失效。这时只能靠 JS + CSS 组合拳：

  • 用 td:empty 伪类匹配真正空的单元格，再加 td:empty { border: none; background: transparent; }
  • 更稳妥的是 JS 扫描：遍历所有 td，判断 textContent.trim() === ""，然后加 class 如 empty-cell，再配 CSS：.empty-cell { border: none; background: transparent; }
  • 避免用 display: none —— 它会破坏表格结构，尤其有 colspan/rowspan 时；visibility: hidden 更安全，保留布局空间

  动态渲染场景下，别指望手写 <td></td>，JS 清理才是唯一可控路径。而那个“看起来空”的判定逻辑，永远比你想象中更严格。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！