empty-cells: show 仅在 border-collapse: separate 下生效；若设为 collapse 则被忽略，此时需用 、伪元素或 border 控制空单元格边框。
empty-cells: show 只对 border-collapse: separate 生效
很多人试了 empty-cells: show 却看不到空单元格边框，根本原因是它被 border-collapse: collapse 直接忽略——CSS 规范明确要求：当表格边框处于「合并模式」时，empty-cells 完全无效。
必须配合 border-collapse: separate 才能起作用，但这也意味着你将失去「共享边框」的视觉效果，每个单元格边框独立绘制，相邻边框会双倍加粗（比如上下两个 <td> 各画 1px 上/下边框，中间就变成 2px 间距）。
- ✅ 正确组合：
border-collapse: separate; empty-cells: show; - ❌ 无效组合：
border-collapse: collapse; empty-cells: show;（浏览器直接无视empty-cells） - ⚠️ 注意：即使设置了
empty-cells: show，若单元格内只有空白符（空格、换行），仍可能被视为空——建议用min-width/min-height确保渲染占位
替代方案：用伪元素或透明内容撑开空单元格
如果必须用 border-collapse: collapse（比如追求紧凑边框、兼容旧项目），就不能依赖 empty-cells。更可靠的做法是让空单元格「不真正为空」：
- 在空
<td>里写 - 用 CSS 插入伪元素：
td:empty::before { content: "\00a0"; }（\00a0是 的 Unicode） - 给空单元格加
min-width: 1px; min-height: 1em;，配合border强制显示边框轮廓
注意：伪元素方案在部分老浏览器（如 IE11）中对 :empty 支持不稳定，生产环境建议优先用 或 JS 注入。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
border-collapse: collapse 下的边框控制其实更精细
虽然 empty-cells 失效，但你可以通过 border 属性本身控制哪些边显示。例如：
td {
border: 1px solid #ccc;
}
td:empty {
border-color: transparent; /* 隐藏空单元格所有边框 */
}
/* 或只隐藏某一边 */
td:empty {
border-bottom: none;
}这种写法比依赖 empty-cells 更可控，也兼容所有现代浏览器。关键点在于：不要试图让「真·空」单元格在 collapse 模式下“自动显示边框”，而是主动定义它的边框行为。
实际调试时先确认是否真为空
常见误判：开发者以为单元格是空的，但 HTML 中其实存在看不见的字符（如换行、缩进空格），导致 :empty 伪类不匹配，empty-cells 也不触发。
- 用浏览器开发者工具检查 DOM 节点文本内容，右键「Edit as HTML」看是否有隐藏空白
- 临时加
td { background: #fee; }，观察是否所有格子都被高亮——没高亮的才是真·空 - 服务端渲染或模板引擎（如 Jinja、Twig）可能注入空格，需检查模板逻辑而非仅看最终 HTML
空单元格的渲染表现，本质是「HTML 结构 + CSS 边框模型 + 浏览器解析规则」三者叠加的结果，任何一个环节偏差都会让 empty-cells 显得“失灵”。
