empty-cells: hide 仅对 display: table-cell 元素生效，且要求其最近 table 上下文为 display: table/inline-table 并显式设 border-collapse: separate；单元格必须完全无渲染内容（不含空格、换行、NBSP等），否则不触发隐藏。
empty-cells: hide 只对 table 元素生效，且必须是 display: table-cell 的直接父容器为 table 或 inline-table
很多开发者试了 empty-cells: hide 没效果，第一反应是“属性失效”，其实大概率是元素没在正确的表格上下文中。这个属性**只作用于 <td> 和 <th> 这类 display: table-cell 元素**，而且它的计算值依赖于最近的、具有 display: table（或 inline-table）的祖先——不是 <table> 标签也行，但必须是 table 表现模型。
常见误用场景：
- 给
<div>设置display: table-cell，但它的父级是div（默认display: block），此时empty-cells完全不参与渲染计算 - 在 Flex 或 Grid 布局里强行套用
table-cell，忽略 display 层级链断裂 - 用了
border-collapse: collapse却没意识到它会覆盖empty-cells的部分表现（见下一条）
border-collapse: collapse 会让 empty-cells: hide 失效或行为异常
empty-cells 的隐藏逻辑是：当单元格为空且该属性为 hide 时，**不绘制该单元格的边框和背景**。但一旦启用 border-collapse: collapse，相邻单元格的边框会合并成一条线，此时“空单元格是否该画边框”由整行/整列的边框优先级决定，empty-cells 就不再起主导作用。
正确做法：
立即学习“前端免费学习笔记（深入）”；
- 如果目标是彻底隐藏空单元格的视觉痕迹（包括边框和间隙），优先用
border-collapse: separate（默认值），再配empty-cells: hide - 若必须用
collapse（比如想消除双线边框），那就别依赖empty-cells，改用 JS 清空内容后加visibility: hidden或display: none—— 但注意后者会破坏表格结构流 -
empty-cells: hide对border-style: none无效：即使设了hide，只要单元格有显式border: 1px solid transparent，边框仍会占位
空单元格判定标准比想象中严格：仅当 content 为纯空白符才生效
CSS 规范定义“empty”为：单元格内无任何**渲染内容**，包括文本节点、替换元素（如 <img>）、伪元素（::before/::after），且所有子节点的 display 都不为 table-cell 等参与表格布局的值。
这些情况会被当成“非空”，empty-cells: hide 不触发：
-
<td> </td>（NBSP 是可渲染字符） -
<td> </td>（含空格、换行、制表符等空白符，只要没被white-space: nowrap折叠掉） -
<td><span style="display:none">x</span></td>（display: none子元素不算，但若子元素是visibility: hidden，仍算有内容） -
<td></td>但该<td>上设置了background或border—— 注意：empty-cells只影响边框/背景的“绘制”，不影响样式声明本身
替代方案更可控：用 :empty 伪类 + visibility 或 border-color
现代项目中，empty-cells 兼容性虽好（IE8+），但行为边界模糊、调试困难。更推荐用 CSS 选择器主动控制：
-
td:empty { border: none; }—— 直接移除边框，比empty-cells更明确 -
td:empty { visibility: hidden; }—— 保留占位，但隐藏所有内容（含边框） - 配合
td:empty::before { content: ""; }可进一步确保“真空”，避免空白符干扰 - 注意：
:empty不匹配含注释或文本节点的单元格，JS 动态清空后需手动触发重绘（一般自动）
真正难处理的是服务端渲染时混入不可见字符、富文本编辑器残留零宽空格（\u200B）这类问题——这时候靠 CSS 属性已经不够，得在数据层清洗。
