先定义好表格的奇偶行样式,如下代码:
复制代码 代码如下:
body {
font-size:12px;
}
th {
color: #FFFFFF;
background: #A172AC;
}
table,table td,table th {
padding: 0.5em;
margin: 0;
border:0;
border-spacing:0;
}
table tbody tr.odd,
.odd {
background: #FBD106;
}
table tbody tr.even,
.even {
background: #E6453B;
}
.odd:hover,
.even:hover,
.hover {
background: #4BB747;
color: #FFFFFF;
}
再就是页面代码了:
复制代码 代码如下:
| data | data | data | data |
|---|---|---|---|
| data | data | data | data |
| data | data | data | data |
| data | data | data | data |
| data | data | data | data |
如果不需要鼠标事件,只需奇偶行不同色直接可以用CSS搞定。
复制代码 代码如下:
table tr:nth-child(even) td,
table tr:nth-child(even) th {
background-color: #FBD106;
}
table tr:nth-child(odd) td,
table tr:nth-child(odd) th {
background-color: #E6453B;
}



