CSS border-collapse 属性定义表格边框的合并方式。
border-collapse: collapse | separate;
border-collapse 属性可以有两个值:collapse 和 separate。默认值是 separate,表示单元格之间的边框是分离的,即使用不同的颜色也可以看出来。而 collapse 则表示单元格之间的边框会合并成一条线,这时候就不能够区分出单元格之间的界限了。
border-collapse 属性可以应用在 table 上,也可以应用在 table 的子元素上,如 thead、tbody、tfoot、tr、td 等。如果在 table 上应用了 border-collapse: collapse,那么所有子元素都会采用这个属性;如果在子元素上应用了 border-collapse: separate,那么这个子元素会采用这个属性;如果在子元素上应用了 border-collapse: collapse,但是 table 上没有应用该属性,那么该子元素将采用 table 的 border-collapse 属性。
border-collapse 属性可以帮助我们定义表格中单元格之间的边框显示方式。当我们想要将表格中单元格之间的边框合并成一条时,就可以使用该属性来实现。而当我们想要将表格中单元格之间的边框分开时,就可以使用该属性来实现。因此 border-collapse 是一个很有用的 CSS 属性。
border-collapse 属性设置表格的边框是否被合并为一个单一的边框,还是象在标准的 HTML 中那样分开显示。
默认值: | separate |
---|---|
继承: | yes |
版本: | CSS2 |
JavaScript 语法: | object object.style.borderCollapse="collapse" |
为表格设置合并边框模型:
所有主要浏览器都支持border - collapse属性。
注意: 任何版本的Internet Explorer(包括IE9)支持属性值"inherit"。
注意: border - collapse属性,如果没有指定!DOCTYPE,可能产生意想不到的效果。
值 | 说明 |
---|---|
collapse | 如果可能,边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性 |
separate | 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性 |
inherit | 规定应该从父元素继承 border-collapse 属性的值 |
CSS 教程: CSS Table
CSS 参考手册 实例使用一幅图像作为围绕 div 元素的边框:div{border-image-source: url(border.png);} 浏览器支持属性border-im...
CSS border-right-style 属性实例设定右边框的样式:p {border-style:solid;border-right-style:dotted;}属性定义及使用说明bord...
CSS * 选择器完整CSS选择器参考手册定义和用法 * 选择器选择所有元素。* 选择器匹配文档中的每个元素,包括html和body元素。* 选...
CSS 参考手册实例以反方向显示 div 框的子元素:div{width:350px;height:100px;border:1px solid black;display:-moz-box;-moz-b...
CSS3 box-orient 属性实例指定div元素的子元素横向排列:div{width:350px;height:100px;border:1px solid black;display:-moz-bo...