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 控制样式 - 若必须用
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模式，它只是“写着好看”，实际不生效 - 读取时返回字符串，设置时也必须是字符串，不能传布尔值或数字
show 和 hide，而在于意识到：只要表格边框需要稳定对齐、响应式缩放或跨浏览器一致，empty-cells 就不该是第一选择——它是个窄口径的补丁，不是布局方案。 
