css表格属性border-collapse与border-spacing使用

border-collapse用于控制表格边框是否合并，collapse值使相邻单元格共享边框，separate为默认值保持独立边框；2. border-spacing在separate模式下设置单元格间距，接受一或两个长度值定义水平和垂直间距；3. 两者互斥，collapse时border-spacing无效；4. 现代设计多用collapse配合padding实现简洁表格。

在CSS中控制表格边框样式时，border-collapse 和 border-spacing 是两个关键属性，它们决定了表格单元格之间的边框如何显示和排列。

border-collapse：控制边框是否合并

该属性用于设置表格的边框是合并成单一边框，还是保持分离状态。它适用于 table 元素，有以下两个常用值：

• collapse：相邻单元格共享边框，边框会合并为一条线。这是传统HTML表格的 cellspacing="0" 效果。
• separate：默认值，每个单元格保持独立边框，边框之间可以有间距。

table {
  border-collapse: collapse;
}

这样设置后，表格的上下左右边框会紧贴在一起，消除双线效果，常用于简洁风格的表格设计。

border-spacing：设置单元格边框间距

该属性只有在 border-collapse: separate 时才生效，用于定义单元格之间的水平和垂直间距，类似于HTML中 cellspacing 属性的功能。

立即学习“前端免费学习笔记（深入）”；

• 可以接受一个或两个长度值：
  - 一个值：表示水平和垂直间距相同。
  - 两个值：第一个为水平间距，第二个为垂直间距。
• 不能用于 border-collapse: collapse 的表格，否则无效。

table {
  border-collapse: separate;
  border-spacing: 10px 5px;
}

这将使单元格之间水平间距为10px，垂直间距为5px，适合需要留白的表格布局。

飞书多维表格

表格形态的AI工作流搭建工具，支持批量化的AI创作与分析任务，接入DeepSeek R1满血版

26

查看详情

实际使用建议

大多数现代网页设计倾向于使用 border-collapse: collapse 配合统一边框样式，以获得干净、紧凑的表格外观。如果需要单元格间留空，优先考虑使用 padding 而非 border-spacing，除非确实需要保留独立边框。

注意：当表格设置了 border-collapse: collapse 时，border-spacing 将被忽略，两者互斥。

基本上就这些，掌握这两个属性能更灵活地控制表格视觉效果。

以上就是css表格属性border-collapse与border-spacing使用的详细内容，更多请关注php中文网其它相关文章！