跳转到主内容
趣航编程网 - 趣学编程,启航技术之路!

HTML中如何设置表格的单元格间距

border-spacing 是唯一符合 HTML5 标准的单元格间距设置方式,需配合 border-collapse: separate 使用,仅作用于 table 元素,不支持负值,接受一或两个长度值(先横后竖),不可用 padding 替代。
border-spacing
是当前唯一可靠、语义正确且符合 HTML5 标准的设置单元格间距的方式。`cellspacing` 属性已废弃,不应再使用。 为什么
border-spacing
不生效? 最常见原因是表格的
border-collapse
被设为
collapse
。该属性会强制合并边框,使单元格“贴在一起”,此时
border-spacing
完全被忽略。 必须确保
border-collapse: separate
(这是默认值,但常被重置) 检查是否有全局 CSS 重置了表格样式,例如
table { border-collapse: collapse; }
border-spacing
只作用于
元素,不能写在
上 不支持负值,单位必须是
px
、
em
等合法长度单位
border-spacing
的参数怎么配? 它接受一个或两个长度值:
border-spacing: 10px
→ 水平和垂直间距都是 10px
border-spacing: 12px 4px
→ 水平 12px,垂直 4px(注意顺序:先横后竖) 不能写成
border-spacing: 4px 12px
并指望它“垂直优先”——CSS 规范明确约定第一个值是水平间距 示例:
或
AB
CD
别用
padding
模拟单元格间距 给
加
padding
看起来像有间距,但它改变的是内容到边框的距离,不是单元格之间的空隙。这会导致: 表格总宽度不可控(padding 累加进单元格尺寸) 边框视觉错位(尤其当
border-collapse: collapse
时,padding 会让边框“浮起来”) 无法实现真正的“单元格间隙”效果(比如想让背景色透出间隔,padding 做不到) 真正需要单元格之间留白,就只动
border-spacing
,其他地方别碰。 使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件 如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更 下载 立即学习 “ 前端免费学习笔记(深入) ”; 兼容性与维护提醒
border-spacing
在所有现代浏览器中完全支持,包括 IE8+。但要注意:如果你的项目仍需支持旧版 IE(如 IE7),
cellspacing
属性虽废弃,反而是当时唯一选择——不过 2026 年还保留在意 IE7 的场景,基本只存在于遗留系统维护中,而非新开发。 实际项目里最容易被忽略的一点:团队成员可能在不同文件里分别设置了
border-collapse
和
border-spacing
,导致样式冲突。建议统一在基础表格类(如
.table-spaced
)中封装这两个声明,避免零散覆盖。

相关文章