html表格字重叠,CSS表格中的单元格边框重叠的border-collapse属性

5268f80b9b1e01f982625ef6fac83ca1.png

语法: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。也就是出现细线边框了。

cellspacing设置为“0”,显示的结果就是第一个表格的每个单元格之间的距离为0。若将表格边框设为“0”,则单元格 的距离就是0了

cellpadding属性用来指定单元格内容与单元格边界之间的空白距离的大小

。此属性的参数值也是数字,表示单元格内容与上下边界之间空白距离的高度所占像素点数以及单元格内容与左右边界之间空白距离的宽度所占的像素点数。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值