码农教程 - 一技在手,衣食无忧! tools

目录

CSS border-collapse 属性

❮上一节 完整的CSS参考 下一节❯

示例

设置两个表的折叠边框模型：

#table1 {
  border-collapse: separate;
}

#table2 {
  border-collapse: collapse;
}
亲自试一试 »

下面有更多 "亲自试一试" 示例。

定义和用法

这个border-collapse属性设置表格边框是应该折叠成单个边框还是像标准 HTML 中那样分开。

展示演示❯

默认值： 分离
遗传： 是的
可动画： 不。阅读可动画的
版本： CSS2
JavaScript 语法： 对象.style.borderCollapse="collapse"尝试一下

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

Property
border-collapse 1.0 5.0 1.0 1.2 4.0

CSS 语法

border-collapse: separate|collapse|initial|inherit;

属性值

Value Description Demo
separate Borders are separated; each cell will display its own borders. This is default. Demo ❯
collapse Borders are collapsed into a single border when possible (border-spacing and empty-cells properties have no effect) Demo ❯
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

更多示例

示例

当使用"border-collapse: separate"时，border-spacing属性可用于设置单元格之间的间距：

#table1 {
  border-collapse: separate;
  border-spacing: 10px;
}
亲自试一试 »

示例

当使用"border-collapse: collapse"时，代码中首先出现的单元格将"win"：

table, td, th {
  border: 3px solid red;
}

#table1 {
  border-collapse: collapse;
  border-color: blue;
}
亲自试一试 »

相关页面

CSS教程：CSS表

HTML DOM 参考：borderCollapse 属性


❮上一节 完整的CSS参考 下一节❯