<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript" src="js/jquery-2.1.4.min.js" ></script>
<script type="text/javascript" src="js/jquery.freezeheader.js"></script>
<style type="text/css">
table{width: 100%; border-collapse:collapse; text-align: center;}
table thead{background-color: #CCCCCC;}
table tr td{border:1px solid red; }
</style>
</head>
<body>
<table id="mytable">
<thead>
<tr>
<td>表头1</td> <td>表头2</td> <td>表头3</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td> <td>2</td> <td>3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总计</td> <td>总计</td> <td>总计</td>
</tr>
</tfoot>
</table>
<script>
//不要问我为啥js生成，因为一个一个写，难看还慢
for (var i=0; i<20; i++) {
$("tbody").append($("tbody tr:first").clone())
}
//锁定头部
$("#mytable").freezeHeader({ 'height': '300px' });
</script>
</body>
</html>
源码展示>>