empty-cells: hide 不生效主因是 border-collapse: collapse，该属性下规范强制忽略 empty-cells；仅当 border-collapse: separate 时有效，且要求单元格完全无内容（不含空格、换行等）。
empty-cells: hide 为什么经常不生效
empty-cells: hide 看起来没反应，90% 是因为表格用了 border-collapse: collapse。这个属性一开，empty-cells 就被浏览器直接忽略——规范明确要求它只在 border-collapse: separate 下工作。
常见误判点：
- Bootstrap、Ant Design、Element Plus 等框架默认注入
border-collapse: collapse到全局table，你写的局部样式可能被覆盖 - DevTools 里看到的 computed
border-collapse值可能是 “collapse”，也可能是 “not set”（此时各浏览器默认值不一致） - 写了
border: 1px solid #ccc这类简写，但没显式声明border-collapse: separate，它不会自动生效
空单元格到底要“空”成什么样
empty-cells: hide 只认真正空的 <td></td> 或 <th></th> —— 标签内部不能有任何字符节点：不含空格、换行、 、<!-- -->，甚至 JS 插入的空字符串 "" 都会让它失效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用 DevTools 右键 → “Edit as HTML” 查看原始标签内容，比肉眼判断靠谱得多
- 模板渲染（Vue/React/Jinja）常在
<td>{{ value }}</td>中保留换行，结果变成<td>\n \n</td>，这不算空 - 后端返回
null或""，前端拼接时避免写成`<td>${val || " "}</td>`，应统一转为<td></td>
display: none 和 visibility: hidden 的实际影响
想隐藏单个单元格，display: none 虽然简单，但会破坏表格结构：后续单元格可能错位，尤其有 colspan 或 rowspan 时；屏幕阅读器也无法读取该内容。
更稳妥的选择：
-
visibility: hidden：保留布局空间，仅内容不可见，适合需要维持对齐的场景 - 用类名控制（如
.hidden-cell），配合 CSS.hidden-cell { display: table-cell; visibility: hidden; }，JS 用classList.toggle()切换，避免内联样式覆盖原始display类型 - 若需彻底移除且能接受结构变化，确保整列同步处理
<thead><th>和<tbody><td>，否则表头悬空、列宽崩坏
border-collapse: collapse 下怎么隐藏空单元格
一旦用了 border-collapse: collapse（多数现代表格布局都需要它），empty-cells 本就不工作。这时只能靠其他手段：
- JS 判断内容后加 class：
td[data-empty]+ CSStd[data-empty] { border: none; background: transparent; } - 属性选择器匹配视觉为空：
td:empty, td[data-empty]，再用 JS 给含空白或空字符串的td添加data-empty属性 - 慎用
td:not(:has(*)):not(:has(text()))：兼容性有限，Safari 和旧版 Chrome 不支持:has()
容易被忽略的是：即使边框真被隐藏了，相邻非空单元格的边框在 separate 模式下也不会自动延伸补位，视觉上仍可能出现白缝或断线——这不是 bug，是绘制逻辑本身如此。
