empty-cells: hide 未生效是因为 border-collapse: collapse 与之互斥，仅在 separate 模式下有效；且“空”指内容树完全为空（无文本节点、无子元素），还需注意 padding 和 background 的残留影响。
empty-cells: hide 为什么没生效
直接写 empty-cells: hide 却看不到效果？大概率是因为表格用了 border-collapse: collapse。这个属性和 empty-cells 是互斥的：CSS 规范明确要求，empty-cells 只在 border-collapse: separate 模式下才起作用，collapse 下完全被忽略。
常见错误是照搬别人代码，只复制了 empty-cells: hide，却没同步设置 border-collapse: separate。结果边框纹丝不动。
- 必须同时写：
table { border-collapse: separate; empty-cells: hide; } - 如果已用
border-collapse: collapse（比如为合并边框），那empty-cells就是摆设，换方案 - 检查 computed 样式里
border-collapse的实际值，别信声明顺序——它会被更高优先级规则覆盖
空单元格的判定比你想象的更严格
CSS 里的“空”不是肉眼判断，而是内容树为空：既不能有文本节点（哪怕一个空格、一个换行符），也不能有任何子元素。
这些都不算空：
立即学习“前端免费学习笔记（深入）”；
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
-
<td> </td>（含空格）→ 有文本节点 → 不隐藏 -
<td>\n</td>（含换行）→ 有文本节点 → 不隐藏 -
<td> </td>（含实体）→ 有子节点 → 不隐藏
只有这样才算空：
-
<td></td>（完全无字符、无子节点）→empty-cells: hide才生效
用开发者工具选中 <td>，看 Elements 面板里是否真没内容；或检查 computed 中 <code>content 是否为 none。
隐藏后还有“白块”？不是边框没藏住，是 padding 和 background 在作怪
empty-cells: hide 只控制边框和背景的绘制行为，不碰 padding、height、background-color。所以你看到的“残留空白”，往往是单元格自身的内边距或继承的背景色。
- 如果周围有明显间距 → 加
td { padding: 0; } - 如果整行背景色透出像漏了一块 → 确认没给
td单独设background-color，或统一设为transparent - 用开发者工具检查该
<td> 的 computed <code>border是否为none、background-image是否为none动态生成表格时，CSS 方案不可靠，该用 JS 清理
模板渲染、AJAX 插入的数据很难保证每个
<td> 都是严格空的——空格、换行、零宽字符极易混入。此时依赖 <code>empty-cells就是赌运气。更可控的做法是插入后用 JS 扫描并标准化：
- 遍历所有
td和th，用textContent.trim() === ''判断是否真为空 - 对空单元格显式加 class：
td.empty { border: none; background: transparent; padding: 0; } - 避免操作 innerHTML，防止 XSS；用
textContent或nodeValue更安全
真正麻烦的从来不是“怎么写 CSS”，而是 HTML 源码里那些看不见的空白字符 —— 它们让看似简单的隐藏逻辑，在不同环境里反复失效。
- 遍历所有
