border-collapse用于合并表格边框，collapse值可消除双线间距，separate为默认分离模式；border-spacing在separate模式下设置单元格间距，常配合padding和统一border样式优化表格视觉效果。
在网页布局中，表格（table）虽然不再是主流的布局方式，但在展示结构化数据时依然广泛使用。为了让表格看起来更美观、紧凑或符合设计需求，CSS盒模型中的 border-collapse 和 border-spacing 属性起着关键作用。合理使用这两个属性，可以有效控制表格边框的呈现方式和单元格之间的间距。
理解 border-collapse：控制边框合并
该属性决定表格的边框是合并为单一边框，还是保持分离状态。它有三个常用值：
- collapse：相邻单元格共享边框，边框会合并成一条线。常用于紧凑型表格设计。
- separate：默认值，每个单元格拥有独立边框，可配合 border-spacing 设置间距。
- inherit：继承父元素的边框合并设置。
例如，使用 border-collapse: collapse; 可以消除单元格之间的双线边框，让表格线条更清晰简洁。
使用 border-spacing 控制单元格间距
当 border-collapse 设置为 separate 时，border-spacing 才生效。它定义了相邻单元格边框之间的水平和垂直间距，语法如下：
立即学习“前端免费学习笔记（深入）”；
border-spacing: 10px; /* 水平和垂直间距均为10px */border-spacing: 8px 15px; /* 水平8px，垂直15px */
这个属性类似于块级元素的外边距（margin），但专用于表格单元格。通过调整 spacing，可以让表格看起来更宽松、易读，适合数据密集型展示。
结合 CSS 盒模型优化表格视觉效果
表格中的每个单元格（td/th）本质上也是一个盒模型元素，具备 content、padding、border 和 margin 的特性。因此，可以通过以下方式进一步优化：
- 设置 padding 来控制内容与边框的距离，避免文字贴边。
- 统一 border 样式（如 1px solid #ddd）提升一致性。
- 配合 border-collapse: collapse 避免边框重叠导致的加粗问题。
例如，在数据报表中，常采用 collapsed 边框 + 小 padding 的组合，实现干净利落的视觉风格。
实际应用建议
对于大多数现代表格设计，推荐使用：
table {border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #ccc;
padding: 8px;
}
若需要呼吸感更强的设计，则保留 separate 模式并设置合适的 spacing：
table {border-collapse: separate;
border-spacing: 6px 4px;
border: none;
}
基本上就这些。掌握好 border-collapse 和 border-spacing，能让你的表格在不同场景下都表现得体、易于维护。
