这里只是简单的实现,主要是用了position属性的fixed属性值,这个属性值需要高版本浏览器的支持,如果要兼容低版本的浏览器可以通过写脚本的方式实现,也可以使用UI库,有些UI库里面表格插件的标题行都是冻结的。这里只介绍使用fixed的方法:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div class="freezediv" style="width: 400px; height: 140px; overflow: auto;border:1px solid gray">
<table id="freezedivTable" cellpadding="" cellspacing="">
<tr id="fixTr" style="position: fixed; background-color:Yellow;">
<td style="width: 60px">
序号
</td>
<td style="width: 60px">
内容
</td>
</tr>
<tr>
<td>
序号
</td>
<td>
内容
</td>
</tr>
<tr>
<td style="width: 60px"> </td>
<td style="width: 60px">
内容1
</td>
</tr>
<tr>
<td> </td>
<td>
内容2
</td>
</tr>
<tr>
<td> </td>
<td>
内容3
</td>
</tr>
<tr>
<td> </td>
<td>
内容4
</td>
</tr>
<tr>
<td> </td>
<td>
内容5
</td>
</tr>
<tr>
<td> </td>
<td>
内容6
</td>
</tr>
<tr>
<td> </td>
<td>
内容7
</td>
</tr>
<tr>
<td> </td>
<td>
内容8
</td>
</tr>
<tr>
<td> </td>
<td>
内容9
</td>
</tr>
<tr>
<td> </td>
<td>
内容10
</td>
</tr>
<tr>
<td> </td>
<td>
内容11
</td>
</tr>
<tr>
<td> </td>
<td>
内容12
</td>
</tr>
<tr>
<td> </td>
<td>
内容13
</td>
</tr>
<tr>
<td> </td>
<td>
内容14
</td>
</tr>
<tr>
<td> </td>
<td>
内容15
</td>
</tr>
<tr>
<td> </td>
<td>
内容16
</td>
</tr>
<tr>
<td> </td>
<td>
内容17
</td>
</tr>
<tr>
<td> </td>
<td>
内容18
</td>
</tr>
<tr>
<td> </td>
<td>
内容19
</td>
</tr>
<tr>
<td> </td>
<td>
内容20
</td>
</tr>
</table>
</div>
</body>
</html>