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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Honnyee/article/details/86646370

想让table表的样式变得好看一点，去掉间隔并且规律添加背景色

其实一共需要2步操作

1.添加单元格间隔

border-collapse: collapse

 

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

 

table {

    border-collapse: collapse;

}

 

table tr td {

    border: solid 2px #222;

}

2.隔行显示不同背景颜色

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

 

table tr {

    background: #fff;

}

 

table tr:nth-child(even) {

    background: #ccc;

}