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 控制输出干净内容。
隐藏后还有“白块”或“间距”，怎么办
empty-cells: hide 只跳过边框和背景的绘制，不碰 padding、height、background-color。所以你看到的“残留”，其实是单元格自身的内边距或继承的背景色。
典型表现和对策：
- 单元格周围有明显空白 → 加
td { padding: 0; } - 整行背景色透出，像漏了一块 → 检查是否给
td单独设了background，统一设为transparent或删掉 - 用开发者工具选中空
<td>，看 computed 样式里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 清理才是唯一可控路径。而那个“看起来空”的判定逻辑，永远比你想象中更严格。
