Rumah >hujung hadapan web >html tutorial >CSS属性 table 的 border-collapse 边框合并
说明
该CSS属性用来设定表格的行和列的边框是合并成单边框,还是分别有各自的边框
separate 缺省值。边框分开,不合并。
collapse 边框合并。即如果相邻,则共用同一个边框。
虽然在DIV+CSS 时代 table 的权重越来越低,但是有时候,还是局部地方table 还是挺好用的
特别是制表方面,还是table 比较的方便。
当然,制表肯定少不了边框,但是如果你直接在td上加边框,就会出现一种情况,table 的外围一周是单线,里面都是双线。
你也可以通过其他分开设置的方法实现全部单线,但是这儿有一个最最简单的方法,CSS 里提供了 border-collapse 属性可以控制相连边框的合并还是分离
CSS代码
<span style="color: #800000;"><style> <!-- table</style></span>{<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;">300px</span>;<span style="color: #ff0000;"> border-collapse</span>:<span style="color: #0000ff;">collapse</span>;<span style="color: #ff0000;"> overflow</span>:<span style="color: #0000ff;">hidden</span>;}<span style="color: #800000;"> tr</span>{<span style="color: #ff0000;"> white-space</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;"> td</span>{<span style="color: #ff0000;"> height</span>:<span style="color: #0000ff;">30px</span>;<span style="color: #ff0000;"> border</span>:<span style="color: #0000ff;">#333333 solid 1px</span>;}<span style="color: #800000;"> --> <style></style></span>
html:
<span style="color: #0000ff;"><span style="color: #800000;">table </span><span style="color: #ff0000;">border</span><span style="color: #0000ff;">="0"</span><span style="color: #ff0000;"> cellspacing</span><span style="color: #0000ff;">="0"</span><span style="color: #ff0000;"> cellpadding</span><span style="color: #0000ff;">="0"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><span style="color: #800000;">tbody</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>index<span style="color: #0000ff;"></span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>index<span style="color: #0000ff;"></span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>index<span style="color: #0000ff;"></span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>index<span style="color: #0000ff;"></span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>index<span style="color: #0000ff;"></span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>index<span style="color: #0000ff;"></span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>index<span style="color: #0000ff;"></span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>index<span style="color: #0000ff;"></span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>index<span style="color: #0000ff;"></span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></span><span style="color: #800000;">tbody</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></span><span style="color: #800000;">table</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
参考阅读:
http://www.manongjc.com/article/1211.html
http://www.manongjc.com/article/1212.html