模拟在table中移动鼠标，高亮显示鼠标所在行，固定表头
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body {
border: none;
margin: 0px;
padding: 0px;
text-align: center;
}
table {
flex-align: center;
text-align: center;
border: 0px;
border-spacing: 0px;
border-collapse: collapse;
width: 80%;
margin: 0 auto;
position: relative;
}
table thead tr {
border: 0px;
background: #F3FBFE;
position: fixed;
width: 80%;
z-index: 1;
}
table thead tr::after {
}
table tbody {
position: absolute;
top: 50px;
}
table tbody tr {
border: 0px;
background: #FFF;
}
table tr td,
table tr th {
height: 50px;
padding: 0px;
border-spacing: 0px;
margin: 0px;
border: 1px solid red;
width: 1%;
}
</style>
<script src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function() {
// $('#tablem tr').css('background', '#F3FBFE');
$('#tablem tr:not(:first)').mouseover(function() {
$(this).css('background', '#C1E6FF').siblings().css('background', '#FFF');
});
});
</script>
<body>
<table id="tablem">
<thead>
<tr>
<th>
第一列
</th>
<th>
第二列
</th>
<th>
第三列
</th>
<th>
第四列
</th>
</tr>
</thead>
<tbody>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
<td>34</td>
</tr>
<tr>
<td>41</td>
<td>42</td>
<td>43</td>
<td>44</td>
</tr>
<tr>
<td>51</td>
<td>52</td>
<td>53</td>
<td>54</td>
</tr>
<tr>
<td>61</td>
<td>62</td>
<td>63</td>
<td>64</td>
</tr>
<tr>
<td>71</td>
<td>72</td>
<td>73</td>
<td>74</td>
</tr>
<tr>
<td>81</td>
<td>82</td>
<td>83</td>
<td>44</td>
</tr>
<tr>
<td>91</td>
<td>92</td>
<td>93</td>
<td>94</td>
</tr>
<tr>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
</tbody>
</table>
</body>
</html>
