HTML表格单元格间距设置方法

在网页开发中，若需让表格的单元格之间保留一定间距，增加视觉呼吸感，正确的方法至关重要。本文详细介绍如何通过 border-spacing 属性合法、可靠地控制单元格间距，并提供常见问题排查与替代方案说明。

首先，明确核心结论：border-spacing 是目前唯一符合 HTML5 标准、语义正确且被广泛支持的单元格间距设置方式。老旧的 cellspacing 属性已被废弃，新项目不应继续使用。

border-spacing 是唯一符合 HTML5 标准的单元格间距设置方式，需配合 border-collapse: separate 使用，仅作用于 table 元素，不支持负值，接受一或两个长度值（先横后竖），不可用 padding 替代。

为什么 border-spacing 不生效？

常见原因是表格的 border-collapse 属性被设置为 collapse。该属性会强制合并相邻单元格边框，导致 border-spacing 完全失效。若要使其生效，请注意以下几点：

• border-collapse 必须设为 separate（默认值，但常被全局样式覆盖）。
• 检查全局 CSS 中是否存在类似 table { border-collapse: collapse; } 的规则。
• border-spacing 只能应用于 元素，不能用于 。
  不支持负值，需使用合法长度单位（如 px、em）。

  border-spacing 的参数如何设置？

  该属性可接受一或两个长度值，顺序固定：

  • border-spacing: 10px; —— 水平与垂直间距均为 10 像素。
  • border-spacing: 12px 4px; —— 先水平后垂直，即水平间距 12px，垂直间距 4px。
  • 顺序不可颠倒，第一个值永远代表水平间距。

  示例：

  或

  A	B
  C	D

  勿用 padding 模拟单元格间距

  部分开发者尝试通过给 添加 padding 来产生间距，但这并非正确方法：

  • 表格宽度失控：每个单元格的 padding 会累加到尺寸中，导致总宽度难以预测。
  • 边框视觉错位：尤其在 border-collapse: collapse 模式下，边框可能显得浮于内容之上。
  • 无法呈现真实间隙：若需单元格空隙透出表格背景色，padding 无法实现。

  因此，调整单元格间距应使用 border-spacing，而非 padding。

  兼容性与维护建议

  border-spacing 兼容性良好，支持所有现代浏览器及 IE8 及以上版本。若需兼容 IE7，废弃的 cellspacing 属性是唯一选择，但到 2026 年，此类场景极少见于新项目。团队协作中，建议将 border-collapse 与 border-spacing 统一封装在基础表格样式类（如 .table-spaced）中，避免因分散设置导致样式冲突，便于维护。