css怎么解决表格边框线重复问题.

来源:百度知道 编辑:UC知道 时间:2024/06/09 04:46:15
我用CSS样式做个一个表格的边框,可我在表格内嵌套了一个表格后,边框线出现了重复.请文用CSS怎么取消重复的边框线.

我的边框CSS样式
.bord{
border-collapse:collapse;
border:1px solid #ddd;}

.bord{border:1px solid #ddd;}
bord{
border-collapse:collapse;
border:1px solid #ddd;}

.bord td{border:1px solid #ddd;}

1、td 的边框和table 的边框重叠
.table { border-left:1px solid #dedede; border-top:1px solid #dedede;}
.td { border-right:1px solid #dedede; border-bottom:1px solid #dedede;}
table 只用左边框和上边框,每个td只有右边框和下边框,效果就是整个表格左、上边框是连续实线,右、下边框是延续td的边框所以是断断续续的
解决方法:
.table {border:1px solid #dedede; border-collapse:collapse;}
.td {border:1px solid #dedede; } 橘色字体是关键,边框设置也不用分上下左右了,重叠的话会一个覆盖另一个
firefox中:td的border覆盖table 的,IE中table 的border覆盖td的,我这里border颜色一样,无所谓了
表格线常见问题:
1.表格边框与表格单元格线的重叠。[采用border-collapse:collapse解决]
2.嵌套表格与被嵌套表格边线重叠问题。[采用border-top|left|right|bottom解决]
3.嵌套表格与被嵌套表格对不齐的问题。[采用table-layout: fixed;解决]
4.border-collapse有两个属性,separate 和 collapse 。
separate是默认属性,表格边框默认有1px 的间隙,在表格排版时代,设置好表格背景色,我们曾用它来挤出版块的外边框;
collapse,是将表格边框的间隙去掉,这样给表格的td边框赋值时就不会产生双线框了。
Demo:没有设置collapse属性的双线表格

你定义的类,class名字是一样的哦。
重新定义一个no-border{border:none;}这样一个class类...需要时可以应用抵消掉bord的作用...

border-top:none; 上边
border-bottom:none;