empty-cells:hide仅在border-collapse:separate时生效，此时隐藏空单元格边框和背景但保留位置；若为collapse模式则完全被忽略，且不影响单元格布局。
empty-cells:hide 只在 border-collapse: separate 时生效
很多人加了 empty-cells: hide 却发现整个表格边框“没了”，根本原因是它被当成了万能开关，其实它完全不作用于 border-collapse: collapse 模式。只要表格用了 collapse，empty-cells 就会被浏览器直接忽略——无论设成 show 还是 hide，都不起效。
这是 CSS 规范明确规定的限制：该属性仅适用于“分离边框”模式。所以第一步永远是检查你的 table 是否同时设置了 border-collapse: separate。
- 没设
border-collapse？默认就是separate，但部分旧版 IE（如 IE7）可能行为异常 - 设了
border-collapse: collapse？那empty-cells彻底失效，删掉也一样 - 想用
collapse又要控制空单元格？只能靠内容兜底（比如插
border-collapse: separate + empty-cells:hide 的真实效果
empty-cells: hide 并不是让单元格“变透明”或“消失”，而是**跳过渲染空单元格的边框和背景**。它的影响非常具体：
- 空
<td>或<th>不画边框、不画背景色，但依然占据原有位置（不会塌缩） - 相邻非空单元格的边框仍按
separate规则独立绘制，不会自动“连起来” - 若设置了
border-spacing，空单元格所在行列的间距照常存在，只是中间“看不见”
常见误判：看到空单元格区域没边框，就以为是样式没生效。其实是生效了——它本就不该有。
立即学习“前端免费学习笔记（深入）”；
为什么加了 empty-cells:hide 反而边框更乱了
在 separate 模式下，每个单元格边框独立，颜色/宽度稍有不一致，就容易出现“双线”“断线”“错位”现象。此时再用 empty-cells: hide，会让空单元格变成视觉断点，放大不一致性。
- 比如：非空单元格设了
1px solid #333，而你忘了给空单元格统一定义边框，hide后周围只剩“半截线” - 又比如：用
border-spacing: 2px，空单元格被隐藏后，间距区域裸露，显得像漏了一块 - 解决方向不是调
empty-cells，而是统一所有单元格的border声明，或干脆切到collapse模式
替代方案：什么时候该放弃 empty-cells
如果你的真实目标是“让表格看起来整齐、空单元格不突兀”，empty-cells 往往不是最优解。尤其在以下场景：
- 需要响应式表格或复杂嵌套结构：
separate+empty-cells兼容性差，IE8+ 才支持，且需严格!DOCTYPE - 设计师要求空单元格显示浅灰底色或虚线边框：
hide直接不满足，得用show+ 覆盖样式 - 表格数据由后端动态生成，无法保证字段必填：前端补
真正难处理的，从来不是“怎么隐藏”，而是“怎么让隐藏后不破坏网格节奏”。这时候多花 10 秒检查 border-collapse 值，比调半小时 empty-cells 更有效。
