CSS `border-collapse` 属性

说明

border-collapse CSS 属性指定表格的单元格边框是折叠在单个边框中还是像往常一样分开。

在 CSS 中设置表格单元格的边框有两种不同的模型。

在此模型中，每个表格单元格都有单独的边框。

border-spacing 属性给出的相邻单元格边界之间的距离。

注意： 在分离边框模型中，只有单元格（以及表格本身）可以有边框；行、列、行组和列组不能。

在折叠边框模型中，相邻的表格单元格共享边框。

注意： 在折叠边框模型中，可以指定包围单元格、行、行组、列和列组的全部或部分的边框。

border-collapse 属性选择表格的边框模型。 separate 值选择分离的边框模型。值 collapse 选择折叠边框模型。

下表总结了此属性的使用上下文和版本历史记录。

属性的语法如下：

border-collapse:

separate | collapse | initial | inherit

下面的示例显示了 border-collapse 属性的作用。

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

下表描述了该属性的值。

值	说明
`separate`	选择分离边框模型。这是默认值。
`collapse`	选择折叠边框模型。`border-spacing` 和 `empty-cells` 属性将被忽略。
`initial`	将此属性设置为其默认值。
`inherit`	如果指定，则关联元素采用其父元素 `border-collapse` 属性的计算值。

所有主要的现代浏览器都支持 border-collapse 属性。

请参阅以下教程： CSS 边框, CSS3 边框.