PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

CSS属性 table 的 border-collapse 边框合并

原创
2016-09-30 09:23:09 1390浏览

说明

该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

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。