empty-cells: hide 仅在 border-collapse: collapse 且单元格真正为空（无任何子节点）时生效；含空格、 、换行或块级元素均导致失效，替代方案可用 :empty 或 JS 清理。
empty-cells: hide 不起作用？先确认表格是否满足前提条件
empty-cells: hide 只对 table 元素的 <td> 和 <code><th> 生效，且仅当单元格「真正为空」——即不含任何内容（包括空格、换行、<code> ）时才隐藏。常见失效是因为：单元格里塞了看不见的空白符，或用了 <div> 等块级元素包裹导致渲染出“非空”盒模型。<ul>
<li>检查 HTML 源码：删掉 <code><td> </td> 中的空格和换行，写成 <td></td>
<td> 内写 <code> 或 <br> ——它们会让浏览器判定为“非空”display: table-cell 的伪元素或 flex 替代方案无效，只适用于原生 <table>
<h3>必须设置 border-collapse: collapse 才能看见隐藏效果</h3>
<p><code>empty-cells 在 border-collapse: separate（默认值）下仍会保留单元格的边框/内边距占位，看起来像没隐藏；只有在 border-collapse: collapse 时，空单元格才真正从渲染流中“消失”，相邻边框才会合并。
- 正确写法：
table { border-collapse: collapse; empty-cells: hide; } - 如果用了
border-collapse: separate，即使设了empty-cells: hide，空单元格依然占据空间，只是内容不可见 - 注意：
collapse会影响整个表格边框样式，可能需要重调border值
它不隐藏“有内容但视觉为空”的单元格
empty-cells: hide 对含空字符串、零宽字符、透明文字、visibility: hidden 元素等完全无效。它只认 DOM 层面是否“无子节点”。这类情况得靠 JS 清理或 CSS 逻辑兜底。
- JS 判断并移除空单元格：
document.querySelectorAll('td, th').forEach(el => { if (!el.innerText.trim()) el.remove(); }); - CSS 替代思路（不推荐但有时更可控）：
td:empty, th:empty { display: none; }—— 注意：:empty同样要求严格无子节点，且不兼容 IE - 若单元格含
<span style="opacity:0">x</span>，:empty和empty-cells都不会生效
兼容性与现代替代建议
empty-cells 在所有主流浏览器中支持良好（包括 IE8+），但它本质是为传统表格设计的冷门属性。现在多数场景下，用 display: grid 或 display: flex 布局表格数据更灵活，也更容易控制“空项”的显隐逻辑。
立即学习“前端免费学习笔记（深入）”；
- Grid 示例（按需渲染）：
.grid-table { display: grid; grid-template-columns: repeat(3, 1fr); } .grid-cell { display: contents; } /* 让空项不产生盒 */ .grid-cell:empty { display: none; } - 注意：
display: contents在 Safari 旧版本中有 bug，生产环境需加前缀或降级 - 真正难处理的是服务端渲染后留下的空白单元格——这时候与其纠结
empty-cells，不如让后端返回结构化数据，前端再决定是否渲染该格
CSS 的 empty-cells 是个窄口径开关，不是通用清空工具。它只响应最原始的 DOM 空白状态，且严重依赖 border-collapse 的配合。一旦表格结构复杂、内容动态或带富文本，就很容易掉进“以为隐藏了，其实只是看不见”的坑里。
