empty-cells: hide 仅在 border-collapse: separate 下生效；若为 collapse 则被忽略，且需确保单元格内无任何空白字符，否则无效。
empty-cells: hide 为什么完全没反应
根本原因就一个：border-collapse 没设对。这个属性只在 border-collapse: separate 下生效，一旦表格用了 collapse（比如 Bootstrap、Ant Design 默认值），empty-cells 就被浏览器直接忽略——连 getComputedStyle(table).emptyCells 返回的值都可能是假象。
排查步骤：
- 用 DevTools 查看
table元素的 computed 样式，确认border-collapse真的是separate，不是collapse，也不是未声明（此时各浏览器默认值不一致） - 别只写
border: 1px solid #ccc，它不会自动设置border-collapse，必须显式声明 - 检查是否被框架全局样式覆盖，例如某些 UI 库会注入
table { border-collapse: collapse; }
空单元格到底要“空”到什么程度
empty-cells 只认真正空的 <td></td> 或 <th></th>：内部不能有任何字符节点，包括空格、换行、制表符，甚至不能有 JS 插入的空字符串 ""。
常见踩坑点：
- 模板渲染（如 Vue/React/Jinja）常生成
<td>\n \n</td>，这含空白文本节点，不算“空” - 后端返回
null或""，前端拼接时若写成`<td>${val || " "}</td>`，就变成<td> </td>，失效 - 最准验证方式：DevTools 中右键单元格 → “Edit as HTML”，直接看原始标签内容，别靠肉眼判断
即使生效，边框还是“没消失”或视觉断线
empty-cells: hide 不是让单元格变透明，而是跳过它的边框绘制逻辑。在 separate 模式下，相邻非空单元格的边框不会自动延伸补位，结果就是视觉断线、白缝或列不对齐。
典型现象：左右两个 1px solid #666 单元格中间夹一个空单元格，设了 hide 后横线就断开了。
应对策略：
- 如果表格需要稳定边框对齐，优先改用
border-collapse: collapse+ JS 动态加 class 控制样式（如td.empty { border: none; }） - 若必须用
separate + hide，记得同步设置border-spacing，否则间距区域会裸露成白块
JavaScript 动态控制 emptyCells 的坑
通过 JS 设置必须同步确保 borderCollapse 是 separate，且注意大小写 —— CSS 属性是 empty-cells，JS 属性名是 emptyCells（驼峰），别写成 emptycells（现代浏览器已不认）。
正确写法：
tableEl.style.borderCollapse = 'separate'; tableEl.style.emptyCells = 'hide';
注意事项：
-
getComputedStyle(tableEl).emptyCells可能返回"hide"，但若当前是collapse模式，它只是“写着好看”，实际不生效 - 读取时返回字符串，设置时也必须是字符串，不能传布尔值或数字
真正生效的前提从来不是写了 empty-cells: hide，而是你确认了 border-collapse 是 separate、单元格 DOM 节点里确实没有哪怕一个空白字符、且没有其他样式规则在背后悄悄覆盖它。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
