CSS border-collapse 属性

border-collapse属性用于定义表格单元格的边框是否折叠。该属性是表格边框模型（Table Border Model）的一个部分，它决定了表格边框线的绘制方式。

语法

border-collapse: value;

value取值如下：

• collapse：边框会折叠在一起。
• separate：边框会分开绘制。

简述

当 CSS 的 border-collapse 属性被设置为 collapse 时，表格中的相邻单元格的边框将合并成单一的边框，有利于减少表格的视觉噪音。如果设置为separate，则回复到传统的表格边框模式。border-collapse属性不仅会影响表格元素，同时也能够对 td、th、caption、和 table 区域的边框进行设置。

当表格的 border-collapse 设置为 collapse 时，还可以单独设置边框的宽度、样式、颜色：

table {
    border-collapse: collapse;
    border: 1px solid black;
}

th,td {
    border: 1px solid black;
}

当表格边框模式设置为 separate 时，可以使用相同的设置方式，但是需要为每个单元格都设定不同的边框。

使用场景

border-collapse 主要用于提高数据展示的可读性，使表格更加美观。一般来说，当数据量大、表格边框较宽时，建议使用 border-collapse。但是在某些情况下，当表格横跨多个层次时，边框折叠可能不易理解。

属性继承

border-collapse的值不继承，但是可以通过使用*选择符来继承相邻html元素的border-collapse属性。比如，如果在body中设置了 border-collapse: collapse;，那么每个包括在body中的表格都会应用同一设置。而如果需要更改某一个表格的值，则可以使用下面的方式来改变：

.my-table {
    border-collapse: separate;
}

这样就能够使 my-table 类的表格应用 separate 的边框模式，而不是body中的 collapse 模式。