本文摘自PHP中文网,作者青灯夜游,侵删。
border-collapse属性是用于表格元素的, 可以设置表格的两边框合并为一个单一的边框。CSS border-collapse属性
border-collapse属性设置表格的边框是否被合并为一个单一的边框,还是像在标准的 HTML 中那样分开显示。
它有两个值:
separate:默认值,边框是分开的;每个单元格将显示自己的边框
collapse:如果可能,边框会合并为一个单一的边框(此时,border-spacing 和 empty-cells 属性是无效的)。
说明:所有主流浏览器都支持 border-collapse属性。
注:border-collapse属性,如果没有指定!DOCTYPE,可能产生意想不到的效果。
CSS border-collapse属性的使用示例:
下面通过简单代码示例来看看border-collapse属性的使用:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <!DOCTYPE html>
<html>
<head>
<meta charset= "UTF-8" >
<style type = "text/css" >
.box{
width : 400px ;
margin : 100px auto ;
}
table.one { border-collapse : collapse ;}
table.two { border-collapse : separate ;}
td.a {
border-style : dotted ;
border-width : 3px ;
border-color : #000000 ;
padding : 10px 50px ;
}
td.b {
border-style : solid ;
border-width : 3px ;
border-color : #333333 ;
padding : 10px 50px ;
}
</style>
</head>
<body>
<div class= "box" >
<table class = "one" >
< caption >边框折叠示例</ caption >
<tr><td class = "a" >单元格A折叠示例</td></tr>
<tr><td class = "b" >单元格B折叠示例</td></tr>
</table>
<br />
<table class = "two" >
< caption >边框分隔示例</ caption >
<tr><td class = "a" >单元格A分隔示例</td></tr>
<tr><td class = "b" >单元格B分隔示例</td></tr>
</table>
</div>
</body>
</html>
|
效果图:
以上就是border-collapse属性怎么用的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
css如何设置下划线的颜色
css怎么在图片上显示遮罩层
css什么时候用class和id
css的选择符有哪些
css中z-index是什么意思?
css怎么对文字分栏
css如何清除浮动?3种方法介绍
什么是css预处理器
css中的bootstrap是指什么
css怎么让盒子并排显示
更多相关阅读请进入《border-collapse属性》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » border-collapse属性怎么用