CSS中的border-collapse属性详解

描述
border-collapse是CSS表格属性，用于控制表格单元格边框的渲染模式。它决定相邻单元格的边框是合并为单一边框（合并模式）还是保持独立（分离模式）。这个属性主要应用于<table>元素，对表格布局和视觉效果有重要影响。

属性值详解

• separate（默认值）：分离模式，每个单元格拥有独立的边框
• collapse：合并模式，相邻单元格边框合并为单一边框
• inherit：继承父元素的border-collapse值

分离模式（separate）的特点

1. 每个单元格都有完整的四边边框
2. 通过border-spacing属性可控制单元格间距
3. 空单元格可通过empty-cells属性控制显示/隐藏

示例代码：

table {
  border-collapse: separate;
  border-spacing: 4px; /* 单元格间距 */
}
td {
  border: 1px solid #ccc;
  padding: 8px;
}

合并模式（collapse）的特点

1. 相邻单元格边框合并，共享同一条边框线
2. border-spacing和empty-cells属性失效
3. 边框冲突解决规则：
   • 优先级：hidden > double > solid/dashed/dotted > ridge/groove/inset/outset
   • 宽度：更宽的边框优先（除hidden外）
   • 样式：更显眼的样式优先

渐进式学习步骤

步骤1：理解默认行为
创建基础表格，不设置border-collapse：

table { width: 100%; }
td { border: 1px solid #333; padding: 10px; }

此时表格呈分离模式，单元格边框独立显示。

步骤2：应用合并模式
添加border-collapse: collapse：

table {
  border-collapse: collapse;
  width: 100%;
}

观察边框合并效果，相邻单元格共享边框。

步骤3：处理边框冲突
当相邻单元格边框样式不同时：

td.left { border-right: 3px solid red; }
td.right { border-left: 2px dashed blue; }

根据规则，更宽的红色实线边框会覆盖蓝色虚线边框。

步骤4：高级应用技巧

1. 斑马纹表格：

tr:nth-child(even) { background: #f5f5f5; }

2. 行边框强调：

tr { border-bottom: 2px solid #333; }

实际应用场景

• 数据表格：使用collapse模式获得紧凑的视觉效果
• 时间表：separate模式配合border-spacing创建卡片效果
• 价格表：通过边框合并突出重要信息

注意事项

1. 合并模式下，部分边框属性可能表现异常
2. 确保表格结构完整（推荐使用thead、tbody、tfoot）
3. 响应式设计中注意边框宽度的适配

通过系统学习border-collapse属性，可以创建更专业、美观的表格布局，提升数据展示的用户体验。