css border-collapse CSS border-collapse 属性

css border-collapse

CSS border-collapse 属性定义表格边框的合并方式。

border-collapse: collapse | separate;

border-collapse 属性可以有两个值：collapse 和 separate。默认值是 separate，表示单元格之间的边框是分离的，即每个单元格都有自己的边框。而 collapse 则表示单元格之间的边框会合并成一条，只有外围的边框才会显示出来。

使用 border-collapse 属性时，还需要使用 border-spacing 属性来定义单元格之间的间隔大小。border-spacing 的值可以是一个数字，表示水平和垂直方向上的间隔大小都是相同的；也可以是两个数字，分别表示水平方向和垂直方向上的间隔大小。

border-spacing: length | length;

当 border-collapse 的值为 collapse 时，border-spacing 的值将不会生效。因此在使用 border-collapse 时要注意选择正确的值。

为表格设置合并边框模型：

table
{
border-collapse:collapse;
}

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

阅读全文