ASP源码.NET源码PHP源码JSP源码JAVA源码DELPHI源码PB源码VC源码VB源码Android源码
当前位置:首页 >> 网页制作 >> Javascript教程 >> css去掉table的td单元格的间距cellspacing,设置隔行显示不同背景颜色

齐发国际登录

来源:网络整理     时间:2018-10-17     关键词:

本篇文章主要介绍了" css去掉table的td单元格的间距cellspacing,设置隔行显示不同背景颜色",主要涉及到方面的内容,对于Javascript教程感齐发国际游戏的同学可以参考一下: 去掉单元隔间隔单元隔间隔对应table标签上的 cellpadding 和 cellspacing,这里可以用CSS实现,cellpadding 对应 td 的...

去掉单元隔间隔

单元隔间隔对应table标签上的 cellpadding 和 cellspacing,这里可以用CSS实现,cellpadding 对应 td 的 padding。 去除边框 cellspacing 的间隔有以下两种方法:

方法一:  border-collapse: collapse

border-collapse 默认值为separate,即每个td单元格都有独立的边框;collapse表示相邻单元格共用一个边框,此时 border-spacing 将不起作用,设置为collapse单元格间距将消失。

table {

    border-collapse: collapse;

}

table tr td {

    border: solid 2px #222;

}

方法二: 设置 border-spacing: 0

此时边框间隔为0,看上去像是被合并了,但每个td都会有两个边框,相邻td边框会比最左/最右的不邻td的边框厚2倍,为了使单元格边框宽度一致需要特殊处理:

table {

    border-spacing: 0;

    border-bottom: solid 2px #222;

    border-right: solid 2px #222;

}

table tr td {

    border-top: solid 2px #222;

    border-left: solid 2px #222;

}

隔行显示不同背景颜色

可使用nth-child伪类实现,参数分为odd(奇数行)和 even(偶数行),只需复写一个即可

table tr {

    background: #fff;

}

table tr:nth-child(even) {

    background: #ccc;

}


完整示例  https://jsbin.com/yovunum/edit?html,css,output

以上就介绍了 css去掉table的td单元格的间距cellspacing,设置隔行显示不同背景颜色,包括了方面的内容,希望对Javascript教程有齐发国际游戏的朋友有所帮助。

本文网址链接:http://www.machineofchina.com/article/detail_4593251.html

相关图片

相关文章