HTML | DOM 样式 borderCollapse 属性

简介

borderCollapse 属性控制相邻表格边框之间的合并方式。默认情况下相邻的表格边框会重叠在一起，而设置该属性可以将它们合并为一个单独的边框。

语法

table {
  border-collapse: separate|collapse|initial|inherit;
}

属性值

• separate: 默认值，表示表格边框不会合并，相邻边框之间有间隙。
• collapse: 表格边框被合并为一个单独的边框，相邻边框之间没有间隙。
• initial: 表示使用默认值。
• inherit: 表示继承父级元素的属性值。

示例

HTML 代码：

<table style="border-collapse: collapse;">
  <tr>
    <td style="border: 1px solid black;">单元格1</td>
    <td style="border: 1px solid black;">单元格2</td>
  </tr>
  <tr>
    <td style="border: 1px solid black;">单元格3</td>
    <td style="border: 1px solid black;">单元格4</td>
  </tr>
</table>

渲染效果：

示例说明：

以上示例将表格边框设置为合并模式，所有相邻的边框被合并为一个单独的边框，并且相邻边框之间没有间隙。