空单元格边框“消失”是html规范行为，最可靠解法是在其中插入 （\u00a0）以撑开结构并触发边框绘制；empty-cells: show兼容性差且无效，visibility: hidden影响无障碍和布局，display: none破坏列对齐。
空不渲染边框？用 强制保留结构
浏览器对空的 <td></td> 会合并空白、忽略渲染，导致边框“消失”，尤其在 border="1" 或 CSS 边框下明显错位。这不是 bug，是 HTML 渲染规范行为。
最直接的解法：在空单元格里塞一个 （非断空格）。
-
是 Unicode 字符 \u00A0，浏览器视为“有内容”，能撑开单元格、触发边框绘制
- 别用普通空格
或制表符 \t——它们会被解析器压缩成单个空格，且在 white-space: nowrap 下可能被裁掉
- 如果后端返回
null / undefined，模板层或 JS 渲染时需统一转成 ，而不是留空字符串
empty-cells: show 在现代浏览器中基本无效
empty-cells 是 CSS2 属性，本意是控制空单元格是否显示边框，但实际兼容性极差：
- 仅对
border-collapse: separate 生效，而默认表格是 collapse，设了也白设
- Firefox 从 69+ 开始已完全忽略该属性；Chrome/Safari 从未真正支持过视觉表现
- 即使强行设
empty-cells: show + border-collapse: separate，也会破坏列宽对齐、增加 cellspacing 计算复杂度
结论：别依赖它， 更可靠。
动态插入空单元格时 insertCell() 后必须显式赋值
用 JavaScript 操作 DOM 插入空单元格，常见错误是只调用 insertCell() 却没填内容：
-
cell = row.insertCell(); 创建的是空节点，cell.textContent 为 ""，等同于 <td></td>，边框仍会塌陷
- 正确做法是立刻赋值：
cell.textContent = "\u00A0"; 或 cell.innerHTML = " ";
- 如果后续还要往这个单元格里加图标或按钮，建议先设
占位，再用 appendChild() 插入子元素，避免 DOM 重排抖动
用 CSS visibility: hidden 替代删？小心语义断裂
有人想“隐藏”空数据但保留结构，就给 <td> 加 <code>visibility: hidden。这看似可行，但埋了两个坑：
- 屏幕阅读器仍会读出该单元格（哪怕不可见），若内容为空，会报“空白单元格”，影响无障碍体验
- 当表格启用
table-layout: fixed 时，visibility: hidden 不释放空间，可能导致列宽计算异常，尤其配合 <col> width 时
- 真要隐藏，优先考虑用
display: none ——但注意：这会让该 <td> 完全退出文档流，整行单元格数量变少，破坏表格列对齐逻辑
<p>所以，空单元格该留还得留，<code> 是最轻量、最可控的占位选择。别绕远路，也别信过时的 CSS 属性。
浏览器对空的 <td></td> 会合并空白、忽略渲染，导致边框“消失”，尤其在 border="1" 或 CSS 边框下明显错位。这不是 bug，是 HTML 渲染规范行为。
最直接的解法：在空单元格里塞一个 （非断空格）。
-
\u00A0，浏览器视为“有内容”，能撑开单元格、触发边框绘制 - 别用普通空格
\t——它们会被解析器压缩成单个空格，且在white-space: nowrap下可能被裁掉 - 如果后端返回
null/undefined，模板层或 JS 渲染时需统一转成
empty-cells: show 在现代浏览器中基本无效
empty-cells 是 CSS2 属性，本意是控制空单元格是否显示边框，但实际兼容性极差：
- 仅对
border-collapse: separate生效，而默认表格是collapse，设了也白设 - Firefox 从 69+ 开始已完全忽略该属性；Chrome/Safari 从未真正支持过视觉表现
- 即使强行设
empty-cells: show+border-collapse: separate，也会破坏列宽对齐、增加 cellspacing 计算复杂度
结论：别依赖它， 更可靠。
动态插入空单元格时 insertCell() 后必须显式赋值
用 JavaScript 操作 DOM 插入空单元格，常见错误是只调用 insertCell() 却没填内容：
-
cell = row.insertCell();创建的是空节点，cell.textContent为""，等同于<td></td>，边框仍会塌陷 - 正确做法是立刻赋值：
cell.textContent = "\u00A0";或cell.innerHTML = " "; - 如果后续还要往这个单元格里加图标或按钮，建议先设
appendChild()插入子元素，避免 DOM 重排抖动
用 CSS visibility: hidden 替代删？小心语义断裂
有人想“隐藏”空数据但保留结构，就给 <td> 加 <code>visibility: hidden。这看似可行，但埋了两个坑：
- 屏幕阅读器仍会读出该单元格（哪怕不可见），若内容为空，会报“空白单元格”，影响无障碍体验
- 当表格启用
table-layout: fixed 时，visibility: hidden 不释放空间，可能导致列宽计算异常，尤其配合 <col> width 时
- 真要隐藏，优先考虑用
display: none ——但注意：这会让该 <td> 完全退出文档流，整行单元格数量变少，破坏表格列对齐逻辑
<p>所以，空单元格该留还得留，<code> 是最轻量、最可控的占位选择。别绕远路，也别信过时的 CSS 属性。
有人想“隐藏”空数据但保留结构，就给 <td> 加 <code>visibility: hidden。这看似可行，但埋了两个坑：
- 屏幕阅读器仍会读出该单元格（哪怕不可见），若内容为空，会报“空白单元格”，影响无障碍体验
- 当表格启用
table-layout: fixed时，visibility: hidden不释放空间，可能导致列宽计算异常，尤其配合<col>width 时 - 真要隐藏，优先考虑用
display: none——但注意：这会让该<td> 完全退出文档流，整行单元格数量变少，破坏表格列对齐逻辑 <p>所以，空单元格该留还得留，<code>是最轻量、最可控的占位选择。别绕远路，也别信过时的 CSS 属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
