CSS empty-cells:hide导致表格边框消失，如何恢复显示逻辑？

本文共计932个文字，预计阅读时间需要4分钟。

很多人加了 `empty-cells: hide`，但发现整个表格边框显示为没有了。根本原因是它被当成了 `border-collapse: collapse` 的效果，实际上它完全不起作用。只有当表格使用了 `collapse`，`empty-cells` 才会起作用，直接被浏览器忽略。

这是 CSS 规范明确规定的限制：该属性仅适用于“分离边框”模式。所以第一步永远是检查你的 table 是否同时设置了 border-collapse: separate。

• 没设 border-collapse？默认就是 separate，但部分旧版 IE（如 IE7）可能行为异常
• 设了 border-collapse: collapse？那 empty-cells 彻底失效，删掉也一样
• 想用 collapse 又要控制空单元格？只能靠内容兜底（比如插  ）或 JS 动态处理

border-collapse: separate + empty-cells:hide 的真实效果

empty-cells: hide 并不是让单元格“变透明”或“消失”，而是**跳过渲染空单元格的边框和背景**。