空单元格塌陷的根本原因是浏览器忽略纯空白内容，最直接解法是用 占位；但需慎用，仅限视觉占位场景，语义化表格应配合aria-label，长期应通过后端或JS统一归一化空值并注入 。
空单元格不显示边框、表格结构塌陷、视觉上误判为数据缺失——根本原因不是HTML写错了，而是浏览器默认会忽略纯空白内容。最直接有效的解法就是用 占位，但得知道什么时候用、怎么用、以及为什么不能乱用。
为什么空 <td></td> 会“消失”
浏览器渲染时，如果 <td></td> 内部没有任何字符（包括换行、制表符、普通空格），它会被视作“无内容”，从而不分配高度/宽度，边框、背景、padding 全部失效。这不是 bug，是规范行为 —— HTML 空白处理规则决定的：连续空白（含换行、tab）会被压缩为一个空格，而纯空标签等价于零长度内容。
常见错误现象：
-
<td></td>在 Chrome/Firefox 中边框不显示，相邻单元格“挤在一起” - 设置了
background-color或border的空单元格完全不可见 - 用 JavaScript 动态插入空值后，表格行高突然变小或错位
是最稳妥的占位符，但别直接硬塞
（Non-Breaking Space）能强制渲染一个不可折叠的空白字符，让单元格保有盒模型尺寸。但它不是万能胶，滥用会导致语义污染和可访问性问题。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 仅在明确需要“视觉占位”的场景下使用，比如报表、后台管理表格中“暂无数据”位置
- 避免在语义化要求高的表格（如屏幕阅读器需读出“无数据”）中只塞
aria-label或视觉隐藏文本 - 不要用多个
text-align或padding - 动态生成时，优先在 JS 层做判断：
cellContent || ' '，而不是模板里无条件写死
CSS 替代方案：更干净、更可控
如果你控制得了样式层，empty-cells: show 和 white-space: pre 能绕过 HTML 占位符，但兼容性和效果有限制。
关键点：
-
empty-cells: show只对border-collapse: separate生效，且 IE 完全不支持，现代项目慎用 -
td:empty::before { content: '-'; color: #999; }可以统一注入提示符，但需注意伪元素不被屏幕阅读器识别 - 给空单元格加 class（如
<td class="empty"></td>），再用 CSS 设置background、color、text-align，比塞 - 若表格用
table-layout: fixed，空单元格塌陷问题会大幅缓解，但需配合显式width定义列宽
后端/JS 动态处理空值才是长期解法
前端塞 是补救，真正可靠的方式是在数据落地前就标准化空值表达。
典型做法：
- PHP 输出时：
echo empty($val) ? ' ' : htmlspecialchars($val); - JavaScript 渲染表格时：
row.map(cell => cell == null || cell === '' ? ' ' : cell) - Vue 模板中：
{{ item.field || ' ' }}，但要注意 SSR 下可能被转义，需用v-html安全处理 - React 中推荐封装组件：
<TableCell value={data.age} fallback="-" />，把占位逻辑收口
容易被忽略的一点：不同空值类型（null、undefined、''、' '）要统一归一化，否则 || 判断会漏掉带空格字符串。
