empty-cells: hide 仅在 border-collapse: separate 时生效；若为 collapse（如主流UI框架默认值）则被忽略，且空单元格必须真正无内容（零字符节点），否则无效。
empty-cells: hide 能隐藏空单元格边框，但**绝大多数情况下它根本不会生效**——不是你写错了，而是浏览器直接无视了它。
为什么 empty-cells: hide 看起来完全没反应
核心原因只有一个：border-collapse 值不是 separate。
-
empty-cells是 CSS 规范里明确规定的「仅在border-collapse: separate时才启用」的属性；一旦设为collapse（Bootstrap、Ant Design、Element Plus 等框架默认值），该属性被浏览器彻底忽略，连 computed 样式里显示的hide都可能是假象 - 用 DevTools 查看
<table>的 computed 样式，确认border-collapse确实是separate，而不是collapse或未声明（此时各浏览器默认值不一致） - 某些 UI 框架会在全局
table选择器里注入border-collapse: collapse，你写的局部样式可能被覆盖，需加!important或提高选择器权重
空单元格必须“真·空”，否则 empty-cells 不认
所谓“空”，是指 <td></td> 或 <th></th> 内部**零字符节点**——没有文本、没有 HTML 元素、也没有空格、换行、 、<!-- -->。
- 模板渲染（如 Vue/React/Jinja）常保留换行缩进，导致生成
<td>\n \n</td>，这在 DOM 中是一个含空白文本节点的元素，:empty伪类都不匹配，更别说empty-cells - 后端返回
null或""，前端拼接时若写成`<td>${val || " "}</td>`，就会产出<td> </td>，无效 - 最准验证方式：DevTools 中右键单元格 → “Edit as HTML”，直接看原始标签内容，别靠肉眼判断
即使生效，边框“没消失”也很正常
empty-cells: hide 不是让单元格变透明，而是跳过它的边框绘制。在 separate 模式下，相邻非空单元格的边框不会自动延伸补位。
立即学习“前端免费学习笔记（深入）”；
- 结果就是：空单元格位置留白，周围非空单元格的边框断开，形成“白缝”或视觉错位
- 父级
<table>或<tr>上设了border，和单元格无关，也会干扰判断 - 重置样式时只写了
border: none，但忘了outline、box-shadow或浅色background，也会造成“边框还在”的错觉
border-collapse: collapse 下怎么办
如果必须用 collapse（多数现代表格布局都需要它），empty-cells 本就不工作，只能换路子：
- 用 JS 判断内容后加 class：
td.textContent.trim() === ""→ 添加data-empty属性，再配 CSStd[data-empty] { border: none; } - 用属性选择器 + 伪类组合（兼容性有限）：
td:empty, td:not(:has(*)):not(:has(text()))，但 Safari 对:has()支持晚，慎用 - 后端或 JS 渲染前统一把空值转成真正的空标签：
<td></td>，而非<td> </td>
真正容易被忽略的，不是怎么写 CSS，而是你根本没意识到：表格用了 border-collapse: collapse，empty-cells 就已经失效了——连检查都省了。
