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

html-css08

css怎么解决表格边框线重复问题.,第1张

1、td 的边框和table 的边框重叠

.table { border-left:1px solid #dededeborder-top:1px solid #dedede}

.td { border-right:1px solid #dededeborder-bottom:1px solid #dedede}

table 只用左边框和上边框,每个td只有右边框和下边框,效果就是整个表格左、上边框是连续实线,右、下边框是延续td的边框所以是断断续续的

解决方法:

.table {border:1px solid #dededeborder-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属性的双线表格

如果是表格,可以通过border-collapse: collapse来让线重合;

如果是div之类的非表格标签,要么用外间距(margin)分开,要么设置边的时候只设置一个方向,比如border-left

CSS去掉div的边框可以去掉css的border属性,或者覆盖border属性为none来实现。

1、如图,这是一个带边框的div测是页面。

2、第一个div的边框是这行css实现的效果

border: 5px solid black

3、第二个div没有设置边框样式

4、第三个div的css设置了边框样式,但被内联样式覆盖为none,因此也能不显示边框。

代码如下

<div class="box1"></div>

<div class="box2"></div>

<div class="box3" style="border: none"></div>

div{

width:200px

height:120px

margin-bottom:10px

background-color:yellow

}

.box1, .box3{

border: 5px solid black

}