<html>
<head>
<title>表格的首行冻结实现</title>
<script src="jquery-3.1.0.min.js" type="text/javascript"></script>
</head>
<body>
<div id="tableDiv" style="width:500px;overflow:auto;">
<table style="width:720px;">
<tr>
<td style="width:100px;">迭代名称</td>
<td style="width:80px;">得分</td>
<td style="width:100px;">代码覆盖率</td>
<td style="width:120px;">新需求个数</td>
<td style="width:160px;">通过的需求个数</td>
<td style="width:160px;">未通过的需求个数</td>
</tr>
<tr>
<td>迭代一</td>
<td>45</td>
<td>56%</td>
<td>450</td>
<td>12</td>
<td>90</td>
</tr>
<tr>
<td>迭代五</td>
<td>36</td>
<td>78%</td>
<td>216</td>
<td>97</td>
<td>12</td>
</tr>
<tr>
<td>迭代三</td>
<td>37</td>
<td>91%</td>
<td>404</td>
<td>17</td>
<td>34</td>
</tr>
</table>
</div>
<script>
$("#tableDiv").scroll(function(){//给table外面的div滚动事件绑定一个函数
//获得每一行下面的所有的td，设置position为相对定位
//如果有必要也可以设置一个z-index属性
$(this).css({"position":"relative","top":: top });
});
});
</html>
<head>
<title>表格的首行冻结实现</title>
<script src="jquery-3.1.0.min.js" type="text/javascript"></script>
</head>
<body>
<div id="tableDiv" style="width:500px;overflow:auto;">
<table style="width:720px;">
<tr>
<td style="width:100px;">迭代名称</td>
<td style="width:80px;">得分</td>
<td style="width:100px;">代码覆盖率</td>
<td style="width:120px;">新需求个数</td>
<td style="width:160px;">通过的需求个数</td>
<td style="width:160px;">未通过的需求个数</td>
</tr>
<tr>
<td>迭代一</td>
<td>45</td>
<td>56%</td>
<td>450</td>
<td>12</td>
<td>90</td>
</tr>
<tr>
<td>迭代五</td>
<td>36</td>
<td>78%</td>
<td>216</td>
<td>97</td>
<td>12</td>
</tr>
<tr>
<td>迭代三</td>
<td>37</td>
<td>91%</td>
<td>404</td>
<td>17</td>
<td>34</td>
</tr>
</table>
</div>
<script>
$("#tableDiv").scroll(function(){//给table外面的div滚动事件绑定一个函数
var top = $("#tableDiv").scrollTop(); //获取滚动的距离
var tr = $(#tableDiv table tr").first(); //获取表格的tr
//获得每一行下面的所有的td，设置position为相对定位
//如果有必要也可以设置一个z-index属性
$(this).css({"position":"relative","top":: top });
});
});
</script>
</html>