CSS属性 table 的 border-collapse 边框合并
程序员文章站
2022-03-26 22:16:48
...
说明
该CSS属性用来设定表格的行和列的边框是合并成单边框,还是分别有各自的边框
separate 缺省值。边框分开,不合并。
collapse 边框合并。即如果相邻,则共用同一个边框。
虽然在DIV+CSS 时代 table 的权重越来越低,但是有时候,还是局部地方table 还是挺好用的
特别是制表方面,还是table 比较的方便。
当然,制表肯定少不了边框,但是如果你直接在td上加边框,就会出现一种情况,table 的外围一周是单线,里面都是双线。
你也可以通过其他分开设置的方法实现全部单线,但是这儿有一个最最简单的方法,CSS 里提供了 border-collapse 属性可以控制相连边框的合并还是分离
CSS代码
{ width:300px; border-collapse:collapse; overflow:hidden;} tr{ white-space:0;} td{ height:30px; border:#333333 solid 1px;} -->
html:
table border="0" cellspacing="0" cellpadding="0">
tbody>
tr>
td>indextd>
td>indextd>
td>indextd>
tr>
tr>
td>indextd>
td>indextd>
td>indextd>
tr>
tr>
td>indextd>
td>indextd>
td>indextd>
tr>
tbody>
table>
参考阅读:
http://www.manongjc.com/article/1211.html
http://www.manongjc.com/article/1212.html
推荐阅读
-
CSS3支持IE6, 7, and 8的边框border属性
-
CSS之表格边框合并、兄弟标签外边距合并、父子标签的外边距合并
-
html+css合并表格边框的示例代码
-
详解CSS3的box-shadow属性制作边框阴影效果的方法
-
表格table嵌套,边框合并问题_html/css_WEB-ITnose
-
[HTML]表格标签table的使用(基本语法、属性、单元格合并)
-
表格table嵌套,边框合并问题_html/css_WEB-ITnose
-
两点还没睡觉的程序员,类似这样田字格格的展示,css 中间边框怎么实现合并_html/css_WEB-ITnose
-
css中table-layout:fixed 属性的用法
-
关于table中,td的上下边框间距问题_html/css_WEB-ITnose