空单元格属性
最后更新：2026-09-13
empty-cells 空单元格属性
empty-cells 属性控制空单元格（没有内容或只有空白符的单元格）是否显示其边框和背景。默认值 show 会正常渲染空单元格的边框和背景；hide 则会隐藏它们，让表格看起来更整洁。该属性只对 border-collapse:separate 的表格生效。
| 分类 | |
|---|---|
| 初始值 | show |
| 继承 | 是 |
| 适用于 | |
| 可动画 | |
| CSS 版本 | CSS2 |
| 状态 | 标准 |
📝 语法
empty-cells: show | hide;⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
show | hide | 关键字 | 空单元格边框 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| empty-cells | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| 所有主流浏览器均支持 | |||||
提示： empty-cells 需要 border-collapse:separate 才能生效，border-collapse:collapse 模式下该属性无效。
❓ 常见问题
Qempty-cells 的 show 和 hide 对表格外观有什么影响？
Ashow（默认）：空单元格保留边框和背景，表格网格完整连续；hide：空单元格的边框和背景消失，视觉上形成"空洞"，看起来更简洁，适合数据稀疏的表格。注意 hide 只隐藏边框背景，单元格本身和它的宽度仍占据空间，布局不受影响。
Q为什么设置了 empty-cells: hide 但没效果？
A检查 border-collapse 是否为 separate。empty-cells 只在 border-collapse: separate（默认值）模式下生效，如果表格设置了 border-collapse: collapse，该属性会被忽略。这是最常见的失效原因，改成 separate 即可生效。
Qempty-cells 的浏览器兼容性如何？
A支持情况很好，所有主流浏览器（含 IE）都支持，属于 CSS 2.1 属性。唯一注意点是必须在 border-collapse: separate 模式下才生效。使用前确认表格的 border-collapse 状态即可，无需考虑前缀。
Q如何判断一个单元格是不是"空的"？
A空单元格指没有内容或只包含空白字符（空格、换行）的单元格。注意 （不换行空格）会被视为内容，导致 empty-cells: hide 不生效；单元格内若包含子元素（哪怕空 div），也不算空单元格。想强制隐藏这类"伪空"单元格，需先清理其中的空白符。
🏷️ 相关属性
💡 相关案例
📚 相关教程
