這里只是簡單的實現,主要是用了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="0" cellspacing="0">
<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">
1
</td>
<td style="width: 60px">
內容1
</td>
</tr>
<tr>
<td>
2
</td>
<td>
內容2
</td>
</tr>
<tr>
<td>
3
</td>
<td>
內容3
</td>
</tr>
<tr>
<td>
4
</td>
<td>
內容4
</td>
</tr>
<tr>
<td>
5
</td>
<td>
內容5
</td>
</tr>
<tr>
<td>
6
</td>
<td>
內容6
</td>
</tr>
<tr>
<td>
7
</td>
<td>
內容7
</td>
</tr>
<tr>
<td>
8
</td>
<td>
內容8
</td>
</tr>
<tr>
<td>
9
</td>
<td>
內容9
</td>
</tr>
<tr>
<td>
10
</td>
<td>
內容10
</td>
</tr>
<tr>
<td>
11
</td>
<td>
內容11
</td>
</tr>
<tr>
<td>
12
</td>
<td>
內容12
</td>
</tr>
<tr>
<td>
13
</td>
<td>
內容13
</td>
</tr>
<tr>
<td>
14
</td>
<td>
內容14
</td>
</tr>
<tr>
<td>
15
</td>
<td>
內容15
</td>
</tr>
<tr>
<td>
16
</td>
<td>
內容16
</td>
</tr>
<tr>
<td>
17
</td>
<td>
內容17
</td>
</tr>
<tr>
<td>
18
</td>
<td>
內容18
</td>
</tr>
<tr>
<td>
19
</td>
<td>
內容19
</td>
</tr>
<tr>
<td>
20
</td>
<td>
內容20
</td>
</tr>
</table>
</div>
</body>
</html>
