empty-cells: hide 无效是因为 border-collapse: collapse 会忽略该属性，必须设为 separate；仅对完全无内容（含空格、换行）的单元格生效；在 separate 模式下边框仍会断开，建议改用 collapse + JS 控制类或统一 border 声明。
empty-cells: hide 为什么完全没反应
因为你的 table 很可能用了 border-collapse: collapse —— 这是现代 UI 框架（如 Bootstrap、Ant Design）的默认值，而 empty-cells 在这种模式下被浏览器直接忽略，连计算样式都不可信。
验证方法：getComputedStyle(tableEl).borderCollapse 必须返回 "separate"，而不是 "collapse" 或空字符串；同时检查 DevTools 的 Computed 面板，确认 border-collapse 确实生效且未被全局样式覆盖。
- 别只写
border: 1px solid #000，它不自动设border-collapse - 某些 CSS 预处理器会把
table { border-collapse: collapse }注入到全局，你写的局部规则可能被覆盖 - 显式声明
table { border-collapse: separate; empty-cells: hide; }是底线
空单元格到底要“空”成什么样才生效
empty-cells: hide 只对真正空的 <td></td> 或 <th></th> 起作用：标签内部不能有任何字符节点——不含空格、换行、 、<!-- -->，甚至 JS 插入的空字符串 "" 都会让它失效。
常见陷阱：
立即学习“前端免费学习笔记（深入）”；
- Vue/React 模板里写
<td>{{ value }}</td>，渲染后变成<td>\n \n</td>（含换行和缩进） - 后端返回
null，前端拼接时用了`<td>${val || " "}</td>`，结果是<td> </td> - 用 DevTools 右键 → “Edit as HTML”，直接看原始内容，比肉眼判断靠谱得多
边框还是断开了，怎么办
empty-cells: hide 不是“隐藏单元格”，而是跳过它的边框绘制逻辑。在 border-collapse: separate 模式下，相邻非空单元格的边框不会自动延伸补位，视觉上就是一条线突然中断。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
典型现象：左右两个 1px solid #666 单元格中间夹一个空单元格，设了 hide 后横线就断开。
- 优先改用
border-collapse: collapse+ JS 动态加 class 控制样式（比如td.empty { border: none; }） - 若必须用
separate + hide，记得同步设border-spacing: 0，否则间距区域裸露成白块 - 统一所有
td的border声明（包括空单元格），比依赖empty-cells更可控
JavaScript 动态设置 emptyCells 的坑
通过 JS 设置 emptyCells 必须同步确保 borderCollapse 是 separate，且注意大小写和作用域。
正确写法：
tableEl.style.borderCollapse = 'separate'; tableEl.style.emptyCells = 'hide';
错误写法示例：
-
tableEl.style.emptycells = 'hide'（少驼峰，现代浏览器不认） -
tableEl.style.emptyCells = 'hide'但没设borderCollapse（属性写了也白写） - 读取时用
getComputedStyle(tableEl).emptyCells，它可能返回"hide"，但若当前是collapse模式，实际不生效
真正难的不是记住 show 和 hide，而是意识到：只要表格需要稳定边框对齐、响应式缩放或跨浏览器一致，empty-cells 就不该是第一选择——它是个窄口径的补丁，不是布局方案。
