border-collapse:collapse 的使用

兼容性:IE5+ 继承性:无

语法:border-collapse : separate | collapse

取值:
separate :  默认值。边框独立(标准HTML)
collapse :  相邻边被合并

说明:
设置或检索表格的行和单元格的边是合并在一起还是按照标准的HTML样式分开。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 borderCollapse 。

示例:
table { border-collapse: separate; }

应用于:
IE5.0+ currentStyle runtimeStyle style TABLE

例一:没用样式

       
       
       

 

例二:作用样式

       
       
       

 

table width=1 就已经把宽度设置为 1 了
我们面临的问题是这样的,每一个 td 边线都是 1px,table 边线也是 1px。那么当两个td相邻的时候,因为每个 td 边线都是1,所以靠进的时候边线的“宽度和”就是 1+1=2。当 td 和 table 相邻时,同样。

collapse :  相邻边被合并

相邻边被合并!以前我说的 1+1=2 就是因为 td 和td之间,td 和table 之间相邻边的问题。默认时相邻边没有合并,所以就是 1+1=2。现在我们使用 border-collapse:collapse把我们合并了,所以宽度还是 1px。也就是出现细线边框了。

 

posted @ 2009-07-09 13:43  arix04  阅读(607)  评论(0编辑  收藏  举报