border-collapse 用于表格属性, 表示表格的两框线合併为一条。
基本介绍
- 外文名：border-collapse
- 用途：表格属性
- 功能：表格的两框线合併为一条
- 默认值：separate
简介
border-collapse
语法
border-collapse：separate | collapse | inherit
默认值：separate
取值
separate：
默认值。框线会被分开。不会忽略border-spacing 和 empty-cells 属性。
collapse：
如果可能，框线会合併为一个单一的框线。会忽略border-spacing 和 empty-cells 属性。
inherit：
规定应该从父元素继承border-collapse属性的值。
说明
border-collapse属性设定表格的框线是否被合併为一个单一的框线，还是象在标準的 HTML 中那样分开显示
对应的脚本特性为borderCollapse。
以下是border-collapse属性使用说明列表：
| 默认值: | separate |
|---|---|
| 继承: | yes |
| 版本: | CSS2 |
| JavaScript 语法: | object object.style.borderCollapse="collapse" |
示例
首先，我们知道border-collapse属性取值如下：
| border-collapse属性值 | 说明 |
|---|---|
separate | 默认值，框线分开，不合併 |
collapse | 框线合併，如果相邻，则共用一个框线 |
HTML代码：
<table> <caption>表格标题</caption> <!--表头--> <thead> <tr> <th>表头单元格1</th> <th>表头单元格2</th> </tr> </thead> <!--表身--> <tbody> <tr> <td>标準单元格1</td> <td>标準单元格2</td> </tr> <tr> <td>标準单元格1</td> <td>标準单元格2</td> </tr> </tbody> <!--表脚--> <tfoot> <tr> <td>标準单元格1</td> <td>标準单元格2</td> </tr> </tfoot> </table>
CSS代码：
table,th,td{border:1px solid gray;} table{border-collapse:collapse;}对比一下不加“border-collapse:collapse;“就可以深刻理解border-collapse属性了。