这篇文章主要介绍“如何实现当鼠标经过表格数据行时颜色不同且奇偶行颜色也不同”，在日常操作中，相信很多人在如何实现当鼠标经过表格数据行时颜色不同且奇偶行颜色也不同问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”如何实现当鼠标经过表格数据行时颜色不同且奇偶行颜色也不同”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
代码如下:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="table.css" type="text/css" rel="stylesheet" />
<title>table test</title>
<!-- <style>
table tbody tr:hover{
background-color: #EEECEB;
}
</style> -->
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th>性别</th>
<th>班级</th>
</tr>
<tbody>
<tr>
<td>姓名</td>
<td>男</td>
<td>计算机科学与技术一班</td>
</tr>
<tr>
<td>段萌</td>
<td>男</td>
<td>软工一班</td>
</tr>
<tr>
<td>段萌</td>
<td>男</td>
<td>软工一班</td>
</tr>
<tr>
<td>段萌</td>
<td>男</td>
<td>软工一班</td>
</tr>
<tr>
<td>段萌</td>
<td>男</td>
<td>软工一班</td>
</tr>
</tbody>
</table>
</body>
body{ margin:0 auto; text-align:center}
table{margin:0 auto;
border:0px;
solid:#000
}
table tr th{ height:28px;
width: auto;
line-height:28px;
background:#999;
font-weight:bold
}
table tbody tr{
height:28px;
line-height:28px;
text-align:center;
background:#FFF;
vertical-align:middle;
}
table tbody tr:nth-child(odd){
background-color: #DEDEDE
}
table tbody tr:hover{
background-color: #CCCCCC;
}
到此，关于“如何实现当鼠标经过表格数据行时颜色不同且奇偶行颜色也不同”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！
