CSS的odd和even属性实现table表格tr单双行颜色相间而不同
0
325
暴猿
/6/13 9:04:47
效果如下图所示：
img[/layedit/img/06130902562139.gif]
如果先定义两个class，然后每行 tr 均设置其class，这是可以达到要求的，但是代码就比较多，如下代码所示：
[pre]
.tr1{background-color:#F5F5F5}
.tr2{background-color:#FFFFFF}
[/pre]
其实，css都某些定义为我们节省了大量的代码，要达到table表格tr单双行颜色相间而不同的要求也一样，css提供了针对性的写法，代码如下：
[pre]
table tr:nth-child(odd) {
background-color:#F5F5F5;
}
table tr:nth-child(even) {
background-color:#fff;
}
[/pre]
代码里 odd 和 even 是定义单双行的样式，其中 odd 是单行，而 even 是双行。
完整HTML代码
[pre]
CSS实现table表格tr单双行颜色相间而不同
table.dataintable {
margin-top:15px;
border-collapse:collapse;
border:1px solid #aaa;
width:100%;
}
table.dataintable th {
vertical-align:baseline;
padding:5px 15px 5px 6px;
background-color:#3F3F3F;
border:1px solid #3F3F3F;
text-align:left;
color:#fff;
}
table.dataintable td {
vertical-align:text-top;
padding:6px 15px 6px 6px;
border:1px solid #aaa;
}
table.dataintable tr:nth-child(odd) {
background-color:#F5F5F5;
}
table.dataintable tr:nth-child(even) {
background-color:#fff;
}
[/pre]
运行结果
img[/layedit/img/06130904362960.gif]
如果觉得《html颜色代码表odd CSS的odd和even属性实现table表格tr单双行颜色相间而不同》对你有帮助，请点赞、收藏，并留下你的观点哦！
