empty-cells 只在 border-collapse: separate 下生效，collapse 模式下被忽略；空单元格必须严格无内容（不含空格、换行、 等）；生效时边框不绘制，需配合 border-spacing: 0 避免缝隙；ie7 及以下不支持，需 js 或模板层兜底。
empty-cells 在多数现代浏览器里能正常工作，但“看起来没效果”几乎总是因为 border-collapse: collapse 激活了，而这个属性只在 border-collapse: separate 下生效。
为什么 empty-cells: hide 在 Chrome/Firefox/Safari 里完全不响应
浏览器只在 border-collapse: separate 模式下读取 empty-cells。一旦表格用了 collapse（比如 Bootstrap 5 的 .table、Ant Design 的 table 组件默认都设了），empty-cells 就被 CSS 引擎直接忽略——DevTools 里看到的 computed 值可能是 hide，但那只是你写的声明值，不是实际生效值。
- 用 DevTools 查看
table元素的 computed 样式，确认border-collapse确实是separate，而不是collapse或未声明（此时各浏览器默认值不一致） - 检查是否写了
border: 1px solid #ccc这类简写，它不会覆盖已有的border-collapse，必须显式重设border-collapse: separate - 某些框架或全局 CSS 会通过
table { border-collapse: collapse }注入，你的局部样式可能被覆盖，加!important或提高选择器权重试试
空单元格到底要“空”到什么程度才触发 hide
empty-cells 只认真正空的 <td></td> 或 <th></th>：里面不能有空格、换行、 、<span></span>，甚至 JS 插入的 "" 字符串也不算空。
- 模板渲染（如 Vue/React）常在
<td>{{ value }}</td>中保留换行，结果变成<td>\n \n</td>，这不算空 - 后端返回
null或""，前端拼 HTML 时若写成`<td>${val || " "}</td>`，就生成<td> </td>（无效）；得用`<td>${val}</td>`，让val === ""时输出<td></td> - 右键 DevTools → “Edit as HTML”，直接看原始标签内容，比肉眼判断靠谱得多
即使生效，边框“断开”或“留白缝”怎么处理
empty-cells: hide 不是让单元格变透明，而是跳过它的边框绘制逻辑。在 separate 模式下，相邻非空单元格的边框不会自动延伸补位，视觉上就会出现白缝、断线或列不对齐。
- 用
border-spacing: 0消除单元格间距，减少缝隙感 - 如果必须保持视觉上“合并边框”的效果，又想控制空单元格，只能放弃
collapse，改用separate + border-spacing: 0 + empty-cells: show，再手动统一边框颜色和宽度 - 不要用
textContent失效
IE8 及更早版本的兼容性兜底方案
IE8（需有 !DOCTYPE）支持 empty-cells，但 IE7 及以下完全不支持。如果你的项目仍需兼容这些旧环境，纯 CSS 方案失效后，只能退到 JS 或模板层干预：
- JS 动态遍历
td，对textContent.trim() === ""的单元格添加 class，再用 CSS 控制边框 - 后端或模板层判断字段为空时，输出
<td class="empty"></td>，避免前端拼接出带空格的标签 - 慎用
visibility: hidden或font-size: 0等 hack，它们会影响屏幕阅读器和打印样式
最常被忽略的点是：empty-cells 不是独立开关，它和 border-collapse 是强耦合关系；而“空”的定义比直觉严格得多——连一个看不见的换行符都能让它失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
