最直接有效的解法是使用不换行空格（U+00A0）填充空单元格，因其被所有主流浏览器视为有效内容，可强制保留盒模型，使边框、背景和高度正常渲染。

空 <td></td> 会导致边框/背景消失、高度归零，这不是 bug，是浏览器对“无渲染内容”的标准处理——必须塞一个能被识别为“有效内容”的字符，  是最直接有效的解法。

为什么 <td></td> 会塌陷

浏览器把纯空单元格当作“无内容”，不触发盒模型渲染：边框不画、背景不填、高度坍缩为 0。哪怕写了 border: 1px solid 或 background: #eee，只要里面没可渲染字符，就看不到效果。

•  （U+00A0，不换行空格）被所有主流浏览器视为有效内容，强制保留盒模型
• 普通空格 、制表符 \t、换行符会被 HTML 解析器合并或忽略，无效
• :empty 伪类也匹配不到 <td> </td>，因为   是子节点

怎么用   填充空单元格

手动写最可控，适合静态表格或后端模板输出；JS 动态填充需注意 textContent 判断逻辑。

• 直接在 HTML 中写：<td> </td> —— 简单、零依赖、兼容 IE6+
• 避免写多个    ，除非你明确需要加宽；单个已足够维持结构
• 若用 JS 插入，别用 innerText = '' 清空后再填，应直接设 textContent = '\u00a0'
• 服务端模板（如 Jinja2、Thymeleaf）中，用条件判断 +   替代空字符串更稳妥

遇到 border-collapse: collapse 还塌陷？

这个属性会让相邻边框合并，但它不改变“空单元格是否渲染”的逻辑——塌陷根源仍是内容缺失，不是边框合并。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

立即学习“前端免费学习笔记（深入）”；

•   在 border-collapse: collapse 下依然生效，边框和背景都会正常显示
• 别试图用 padding 或 min-height 强撑高度，这些对完全无内容的 <td> 无效
• 如果用了 CSS Grid/Flex 模拟表格，空 div 同样塌陷，也得靠   或 min-width/min-height 配合

JS 动态判空时容易踩的坑

DOM 读取到的   会变成 "\u00a0"，不是空字符串，直接 === '' 会误判。

• 检查是否为空单元格，用：cell.textContent.trim() === ''（自动过滤  ）
• 清空再重填时，别只删子节点，要设 textContent = '\u00a0'，否则又塌了
• 用 innerHTML = ' ' 也可以，但注意 XSS 风险；textContent 更安全

真正麻烦的不是填  ，而是团队里有人坚持用 visibility: hidden 或 font-size: 0 来“隐藏”内容——这些方案在打印、屏幕阅读器、部分移动端浏览器里行为不可控，不如老老实实塞一个  。