empty-cells: hide 无效的主因是 border-collapse: collapse，该属性仅在 separate 模式下生效；空单元格需严格无任何字符节点；生效后边框断开需配合 border-spacing: 0 或改用 collapse。
empty-cells: hide 为什么没反应？先查 border-collapse
绝大多数人调了 empty-cells: hide 没效果，根本原因是表格用了 border-collapse: collapse。这个属性只在 border-collapse: separate 模式下生效，一旦设成 collapse，浏览器直接忽略它，连计算样式里显示的值都可能是假象。
用开发者工具检查 table 元素的 computed 样式，确认 border-collapse 真的是 separate，而不是 collapse 或未声明（此时各浏览器默认值不一致）。
- Bootstrap、Ant Design、Element Plus 等 UI 框架默认全局设置
table { border-collapse: collapse; }，你的局部样式可能被覆盖 -
border: 1px solid这类简写不会自动重置border-collapse，必须显式声明 - 如果项目已依赖
collapse布局（比如需要合并边框对齐），就别硬套empty-cells，换 JS 或 class 控制更可靠
空单元格到底要“空”到什么程度？
empty-cells 只认真正空的 <td></td> 或 <th></th> —— 标签内不能有任何字符节点：不含空格、换行、 、<span></span>，甚至 JS 插入的空字符串 "" 都会让它失效。
模板渲染（Vue/React/Jinja）常在 <td>{{ value }}</td> 中保留换行，结果生成的是 <td>\n \n</td>，这不算空；后端返回 null 或 ""，前端拼接时若写成 `<td>${val || " "}</td>`，就变成 <td> </td>，同样无效。
- 用 DevTools 右键 → “Edit as HTML”，直接看原始标签内容，比肉眼判断靠谱得多
- 后端或 JS 渲染前，把空值统一转为真正的空标签：
<td></td>，而非<td> </td> - 若无法控制源头，可用 JS 给“视觉上为空”的单元格加
data-empty属性，再配td[data-empty] { border: none; }
empty-cells: hide 生效后边框还是断开了？
empty-cells: hide 不是让单元格变透明，而是跳过它的边框绘制逻辑。在 separate 模式下，相邻非空单元格的边框不会自动延伸补位，导致视觉上出现白缝、断线或不对齐。
典型现象：左右两个带 1px solid #666 的单元格中间夹一个空单元格，设了 hide 后，那条横线就断开了。
- 根本解法不是调
empty-cells，而是统一所有单元格的border声明（包括空单元格），或改用border-collapse: collapse - 如果必须用
separate + hide，记得同步设置border-spacing: 0，否则间距区域会裸露成白块 - 父级
<table> 或 <code><tr> 设了 <code>border，也会造成“边框残留”错觉，需一并排查JavaScript 动态设置 emptyCells 要注意什么？
通过 JS 设置必须同时确保
borderCollapse是separate，且注意大小写：emptyCells是驼峰，CSS 里是empty-cells，别写成emptycells（现代浏览器已不认）。正确写法：
tableEl.style.borderCollapse = 'separate'; tableEl.style.emptyCells = 'hide';
读取时返回字符串，比如
getComputedStyle(tableEl).emptyCells返回"hide"，但若当前是collapse模式，它仍可能返回"show"（只是不生效）。-
element.style.emptyCells只影响内联样式，前提是元素本身没被collapse锁死 -
empty-cells不继承，不能写在td或tr上；也不支持inherit值 - 真正在意边框稳定对齐、响应式缩放或跨浏览器一致时，
empty-cells就不该是第一选择——它是个窄口径的补丁，不是布局方案
-
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
