:empty伪类仅匹配完全无子节点（含空格、换行、注释）的元素，常因dom隐式插入空白而失效；需配合::before/after实现占位，或改用:not(:has(*))、js判空、data属性等兼容方案。
空单元格直接写 最快但有坑
浏览器会把纯空 <td></td> 渲染成“塌陷”状态——边框消失、高度归零、对齐错乱。用 （非断空格）能强制保留结构，但要注意：
• 它不是普通空格， 或 \t 会被合并忽略
• 如果后续要 JS 操作内容，textContent 会返回 "\u00a0"，不是空字符串
• 多个 连用（如 ）不会放大空白，仍只占一个字符宽度
• 在 th 中单独放图标时，必须加 scope 属性，否则 会干扰屏幕阅读器识别
用 CSS :empty 伪类统一控制显示符号
适合 Vue/React 等框架中动态渲染的表格，避免每处都写逻辑判断：
• 写 td:empty::before { content: "-"; color: #999; }，空单元格自动显示短横线
• 不要依赖 empty-cells: show —— 它只控制边框是否绘制，不处理内容占位，且 IE 和旧 Safari 不支持
• :empty 匹配的是真正无子节点的 td，如果里面写了 就不算 empty，得用 td:not(:has(*)):not(:empty) 这类组合选择器才准
• 若表格含 span 或 svg 图标，它们算子节点，:empty 不触发，需配合 JS 判断是否“视觉为空”
后端或模板层统一替换更可靠
前端靠 CSS 或 JS 补救，容易漏掉边界情况；在数据输出前处理最稳：
• PHP：用 echo empty($value) ? '-' : htmlspecialchars($value);
• JavaScript：cellValue ?? '-' （注意 null 和 undefined 能被 ?? 捕获，但 "" 和 0 不行，得用 cellValue == null ? '-' : cellValue）
• Java 模板（如 Thymeleaf）：${item.age ?: '-'}
• 关键点：数字字段别用 - 占位，改用 —（长破折号）或留空加浅灰背景，避免影响右对齐数值列的视觉一致性
table-layout: fixed 下空单元格更易失控
启用 table-layout: fixed 后，列宽由第一行或 <col> 决定，空单元格会失去“撑开”能力：
• 如果某列第一行是空的，整列可能缩成几像素宽，后面内容全挤在一起
• 解决办法：确保 <col> 显式设 width，或第一行填真实数据（哪怕只是 ）
• 配合 word-break: break-word 时，空单元格若只含 ，不会触发换行，但若含长文本则可能截断——得额外加 min-width 防列宽崩塌
• 导出 Excel 时，HTML 中的 和 CSS 占位符全丢失，必须后端填充真实字符
null、undefined、""、0、false）和表格嵌套场景（比如 td 里套 div 再放数据），这时候单靠 :empty 或 都会失效，得回到数据源头做清洗。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
