empty-cells: hide 无效是因为 border-collapse 为 collapse，该属性仅在 separate 模式下生效；空单元格必须严格无任何子节点（含空白符），否则不触发；边框断开需配合 border-spacing: 0 或改用 js 动态控制。
empty-cells: hide 为什么没反应
大概率是 border-collapse 设成了 collapse。这个属性只在 border-collapse: separate 下生效，一旦设为 collapse，浏览器直接忽略 empty-cells，连计算样式里都可能显示为 inherit 或 “invalid”。用 getComputedStyle(tableEl).borderCollapse 检查返回值，必须是 "separate" 才算到位。
空单元格到底要“多空”才被识别
empty-cells: hide 只对真正无内容的单元格起作用——内部不能有任何子节点，包括空白符（\n、\t、空格）、注释、甚至 JS 渲染出的空字符串。常见陷阱有：
- Vue/React 模板写成
<td>{{ value }}</td>，渲染后变成<td>\n \n</td> - 后端拼接时用了
`<td>${val || " "}</td>`，结果是<td> </td> - 用 DevTools 的 “Edit as HTML” 看原始 DOM，比肉眼判断靠谱得多
边框断开、背景露白怎么办
empty-cells: hide 不是隐藏单元格本身，只是跳过它的边框绘制逻辑。在 separate 模式下，相邻单元格的边框不会自动延伸补位，视觉上就是一条线突然中断，或单元格间距区域裸露成白块。应对方式有：
- 显式加
border-spacing: 0，避免间距区域暴露 - 统一给所有
td声明border，比依赖empty-cells更可控 - 若必须用
collapse（比如用 Bootstrap），就别碰empty-cells，改用 JS 判断后加类，例如td.empty { border: none; }
display: none 和 empty-cells: hide 的本质区别
display: none 是移除整个元素的渲染流，会影响表格结构（比如列宽重算、跨列错位）；而 empty-cells: hide 只影响边框和背景绘制，单元格仍占位、仍参与布局。动态场景下更推荐 JS 配合 :empty 伪类，但注意：td:empty 同样要求内部零字符节点，<td></td> 可以匹配，<td> </td> 就不行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
