空单元格边框丢失的根本原因是浏览器不渲染无“可绘制内容”的盒子，最稳定方案是在空中插入 ，它强制触发盒模型渲染且全兼容；慎用empty-cells属性，因其仅在border-collapse:separate下有效且易失效；需完整声明border样式并注意合并单元格时的边框补全。
单元格内容为空时边框丢失，根本原因是浏览器不渲染没有“可绘制内容”的盒子——<td></td>或<td> </td>（含普通空格）会被折叠，导致 border、padding 失去作用对象。解决的关键是让单元格拥有语义中立但可渲染的内容，并配合合适的 CSS 渲染模型。
用 填充空单元格
在空 <td> 中插入 <code> （不换行空格），是最轻量、最稳定、全浏览器兼容的方案：
- 它被浏览器识别为有效字符节点，强制触发盒模型渲染，边框、背景、padding 全部生效
- 不受
border-collapse: collapse影响，无论表格用哪种边框合并模式都可用 - 屏幕阅读器会将其读作“空”，保持可访问性语义
- 避免使用普通空格（会被 HTML 解析器合并）或多重复合
- 后端返回
null/undefined时，模板层需主动判断并输出
慎用 empty-cells 属性
empty-cells: show 或 hide 看似语义清晰，但实际限制极多：
- 仅在
border-collapse: separate模式下有效；一旦用了collapse（现代框架如 Bootstrap 默认启用），该属性完全失效 - 要求单元格真正“空”：不能含任何字符节点，包括换行、缩进、注释，甚至 Vue/React 模板生成的
<td>\n \n</td>都会让它失效 - 即使生效，
separate模式下边框仍会断开（相邻单元格边框不自动连接），视觉上仍是“裂开的线” - 推荐做法：放弃
empty-cells，统一用border-collapse: collapse
确保边框样式完整声明
边框不显示，未必是内容空的问题，也可能是 CSS 声明不完整：
- 必须同时设置
border-width、border-style和border-color；只写border-color: #000或border-width: 1px是无效的，因为默认border-style是none - 推荐简写：
border: 1px solid #333 - 清除干扰项：确认没被全局重置样式（如 Normalize.css）、框架默认样式（Ant Design 的
td { border: 1px solid #e8e8e8 }）或内联style="border: none"覆盖 - 检查
table、th、td三层元素的border是否都被显式定义，缺一不可
合并单元格场景下的额外处理
当使用 rowspan 或 colspan 后，被跳过的网格位置无元素，边框自然“消失”。这不是 bug，而是表格渲染逻辑决定的：
- 必须启用
border-collapse: collapse（写在<table> 上） <li>给合并单元格本身加目标方向边框，例如：<code><td rowspan="2" style="border-bottom: 1px solid #333"> <li>给紧邻的未合并单元格补反向边框，例如右侧单元格加 <code>border-left，下方单元格加border-top - 避免用
outline或box-shadow模拟边框，它们不参与布局，易错位
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
