empty-cells: hide 无效的根本原因是与 border-collapse: collapse 互斥；必须显式设为 separate 才生效，且仅对真正空的单元格（无文本、元素、空白字符）起作用，配合 border-spacing: 0 才能避免边框断开。
empty-cells: hide 为什么完全没反应
根本原因就一个：border-collapse: collapse 和 empty-cells 是互斥的。只要表格用了 border-collapse: collapse（现代 UI 框架如 Ant Design、Element Plus、Bootstrap 默认都这么设），empty-cells 就被浏览器直接忽略，无论你写 hide 还是 show 都不生效。
验证方法：打开 DevTools → 选中 <table> 元素 → 查看 Computed 样式里 <code>border-collapse 的值。如果是 collapse 或未声明（各浏览器默认值不同），那 empty-cells 就注定无效。
- 别只改
empty-cells，必须同步显式声明border-collapse: separate - CSS 中写成
table { border-collapse: separate; empty-cells: hide; }，不能省略前者 - 检查是否有全局样式或框架 CSS 覆盖了你的
border-collapse声明
空单元格到底要“空”到什么程度
empty-cells: hide 只对真正空的 <td> 或 <code><th> 生效 —— 即标签内既无文本、也无 HTML 元素、也没有任何空白字符（包括换行、缩进、空格、<code> ）。
常见“伪空”场景：
- 模板渲染后变成
<td>\n \n</td>（含换行和空格） - JS 动态插入时写成
cell.innerHTML = ""，但实际 DOM 中已存在空白文本节点 - 后端返回
null，前端拼接时用了`<td>${val || " "}</td>`，结果是<td> </td>
最准判断方式：在 DevTools 中右键单元格 → “Edit as HTML”，看原始内容是否真的是 <td></td>。
设置了 empty-cells: hide，边框还是断开了
empty-cells: hide 不是让空单元格“变透明”，而是跳过它的边框绘制逻辑。在 border-collapse: separate 模式下，相邻非空单元格的边框不会自动延伸补位，导致视觉上出现白缝、断线或列不对齐。
- 这不是 bug，是规范行为：空单元格的边框被跳过，但周围单元格的边框仍按各自位置绘制
- 若想视觉连贯，优先考虑改用
border-collapse: collapse+ JS 动态加 class 控制空单元格样式 - 若坚持用
separate+hide，必须配合border-spacing: 0消除间隙，否则白块更明显 - 注意：父级
<table> 或 <code><tr> 上设的 <code>border会干扰判断，应只给<td> 设边框 <h3>JavaScript 动态设置 emptyCells 的坑</h3> <p>通过 JS 设置必须同时满足两个硬性条件，缺一不可：</p> <ul> <li> <code>tableEl.style.borderCollapse = 'separate'（注意大小写，不是border-collapse） -
tableEl.style.emptyCells = 'hide'（驼峰命名，不是empty-cells或emptycells）
读取时用 getComputedStyle(tableEl).emptyCells 返回字符串，但该值可能显示 "hide" 却不生效 —— 因为 computed 样式不反映是否被 collapse 锁死。
真正难的不是写对属性名，而是意识到：empty-cells 是个窄口径补丁，只适用于简单静态表格；一旦涉及响应式、跨浏览器一致性或复杂交互，它很快就会暴露局限性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
