定义和用法
border-collapse
属性设置表格的边框是否被合并为单一的边框,还是像在标准的 HTML 中那样分开显示。
border-collapse
属性只能应用于<table>
元素或设置为display: table
的元素中。
默认值: | separate |
继承性: | 支持 |
可动画性: | 否。请参阅:可动画属性。 |
版本: | CSS2 |
JavaScript 语法: | object.style.borderCollapse="collapse"Demo ❯ |
常用的实例
下面通过边框合并和边框分开示例,让你更直观地了解 border-collapse
属性的用法:
/* 为表格设置分开边框模型 */
.table-separate {
border-collapse:separate;
}
/* 为表格设置合并边框模型 */
.table-collapse {
border-collapse:collapse;
}
CSS 语法
border-collapse: separate|collapse|initial|inherit;
属性值
值 | 描述 |
separate |
边框会被分开(默认值)。不会忽略border-spacing和empty-cells属性。 |
collapse |
边框会合并为单一的边框。会忽略border-spacing 和empty-cells 属性。 |
initial |
将此属性设置为其默认值。参阅 initial。 |
inherit |
从其父元素继承此属性。参阅 inherit。 |
浏览器支持
表中的数字指定了完全支持border-collapse
属性的第一个浏览器版本。
![]() |
![]() |
![]() |
![]() |
![]() |
Chrome | IE / Edge | Firefox | Safari | Opera |
1.0 | 5.0 | 1.0 | 1.2 | 4.0 |
评论区 0
发表评论
教程介绍
CSS 参考手册全面涵盖选择器、盒模型,文本属性等,助您快速检索 CSS 使用方法。
87
章节
12
阅读
0
评论
反馈提交成功
感谢您的反馈,我们将尽快处理您的反馈