css去掉table的td单元格的间距cellspacing,设置隔行显示不同背景颜色

栏目: CSS · 发布时间: 7年前

内容简介:单元隔间隔对应table标签上的 cellpadding 和 cellspacing,这里可以用CSS实现,cellpadding 对应 td 的 padding。 去除边框 cellspacing 的间隔有以下两种方法:方法一:  border-collapse: collapseborder-collapse 默认值为separate,即每个td单元格都有独立的边框;collapse表示相邻单元格共用一个边框,此时 border-spacing 将不起作用,设置为collapse单元格间距将消失。

去掉单元隔间隔

单元隔间隔对应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


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Types and Programming Languages

Types and Programming Languages

Benjamin C. Pierce / The MIT Press / 2002-2-1 / USD 95.00

A type system is a syntactic method for automatically checking the absence of certain erroneous behaviors by classifying program phrases according to the kinds of values they compute. The study of typ......一起来看看 《Types and Programming Languages》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码