<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>
源碼展示>>
