直接上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>隔行变色,鼠标滑过变色</title>
<style type="text/css">
.center {
margin: 0 auto;
}
table {
width: 50%;
margin: 0 auto;
text-align: center;
}
th,
td {
height: 40px;
}
/* 首行标题行 */
/* !important代表强制生效，覆盖同属性样式 */
tr:nth-child(1) {
background: #ff5500 !important;
color: #FFFFFF;
}
/* 奇数行 */
tr:nth-child(odd) {
background: #eee;
}
/* 偶数行 */
tr:nth-child(even) {
background: #ffcc00;
}
/* 鼠标滑过变色 */
tr:hover {
background: #fcd300;
}
</style>
</head>
<body>
<div class="center">
<table id="tab" cellspacing="0" cellpadding="0">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>籍贯</th>
</tr>
<tr>
<td>小明</td>
<td>27</td>
<td>男</td>
<td>北京</td>
</tr>
<tr>
<td>小丽</td>
<td>22</td>
<td>女</td>
<td>上海</td>
</tr>
<tr>
<td>小王</td>
<td>25</td>
<td>男</td>
<td>天津</td>
</tr>
<tr>
<td>小米</td>
<td>20</td>
<td>女</td>
<td>深圳</td>
</tr>
<tr>
<td>小刚</td>
<td>20</td>
<td>男</td>
<td>武汉</td>
</tr>
<tr>
<td>小静</td>
<td>19</td>
<td>女</td>
<td>广州</td>
</tr>
</table>
</div>
</body>
</html>