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 里的“空”不是肉眼判断，而是内容树为空：既不能有文本节点（哪怕一个空格、一个换行符），也不能有任何子元素。

这些都不算空：

• <td> </td>（含空格）→ 有文本节点 → 不隐藏
• <td>\n</td>（含换行）→ 有文本节点 → 不隐藏
• <td> </td>（含实体）→ 有子节点 → 不隐藏

只有这样才算空：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

• <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 源码里那些看不见的空白字符 —— 它们让看似简单的隐藏逻辑，在不同环境里反复失效。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！