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

语法:border-collapse : separate | collapse

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

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

示例:

table { border-collapse: separate; }

登录后复制

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

例一:没用样式

以下是border-collapse片段:


登录后复制登录后复制                                                                                          

例二:作用样式

以下是引用片段:


登录后复制登录后复制                                                                                          

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属性用来指定单元格内容与单元格边界之间的空白距离的大小
。此属性的参数值也是数字,表示单元格内容与上下边界之间空白距离的高度所占像素点数以及单元格内容与左右边界之间空白距离的宽度所占的像素点数。

 

 

以上就是CSS 表格中的单元格边框重叠的border-collapse属性的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3122925.html

(0)
上一篇 2025年3月29日 18:25:52
下一篇 2025年3月6日 22:39:40

AD推荐 黄金广告位招租... 更多推荐

相关推荐

发表回复

登录后才能评论