html颜色代码表odd,CSS的odd和even属性实现table表格tr单双行颜色相间而不同

CSS的odd和even属性实现table表格tr单双行颜色相间而不同

 0

 325

暴猿

2019/6/13 9:04:47

效果如下图所示：

img[/layedit/img/201906130902562139.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;

}

值	描述
outline-color	规定边框的颜色。
outline-style	规定边框的样式。
outline-width	规定边框的宽度。
inherit	规定应该从父元素继承 outline 属性的设置。

[/pre]

运行结果

img[/layedit/img/201906130904362960.gif]