CSS border-collapse 属性
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 模式。