在web前端開發(fā)中，讓表頭固定箕别，不隨滾動條的滾動而滾動铜幽。是很多人都會遇到的需求滞谢。
下面來水下如何簡單的實現(xiàn)
先看下初始代碼
<html>
<head>
<meta charset="utf-8">
<style>
</style>
</head>
<body>
<div style="overflow-y:scroll;height:200px;width:300px">
<table border="1">
<tbody>
<tr>
<th style="color:red;border:2px blue solid;">333333333333333333333</th>
</tr>
<tr>
<td>333333333333333333333</td>
</tr>
<tr>
<td>333333333333333333333</td>
</tr>
<tr>
<td>333333333333333333333</td>
</tr>
<tr>
<td>333333333333333333333</td>
</tr>
<tr>
<td>333333333333333333333</td>
</tr>
<tr>
<td>333333333333333333333</td>
</tr>
<tr>
<td>333333333333333333333</td>
</tr>
<tr>
<td>333333333333333333333</td>
</tr>
<tr>
<td>333333333333333333333</td>
</tr>
<tr>
<td>333333333333333333333</td>
</tr>
<tr>
<td>333333333333333333333</td>
</tr>
<tr>
<td>333333333333333333333</td>
</tr>
<tr>
<td>333333333333333333333</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
很簡單，就是一個div包裹了一個table除抛，一個table里面報過了很多行狮杨，然后設置div高度，允許div出現(xiàn)滾動條到忽。
運行結(jié)果如下所示：
可以看到兩圖對比橄教，表頭沒有固定
開始實現(xiàn)表頭固定。
原理：在當前div外面在放一個table,這個tablez=只用來盛飯表頭绘趋，最后在外面在嵌套一個div,把他們?nèi)堪洳眨@樣就能簡單的實現(xiàn)了。
代碼如下：
<html>
<head>
<meta charset="utf-8">
<style>
</style>
</head>
<body>
<div>
<table border="1">
<tbody>
<tr>
<th style="color:red;border:2px blue solid;">33333333333333333333</th>
</tr>
</tbody>
</table>
<div style="overflow-y:scroll;height:200px;width:300px">
<table border="1">
<tbody>
<tr>
<td>333333333333333333333</td>
</tr>
<tr>
<td>333333333333333333333</td>
</tr>
<tr>
<td>333333333333333333333</td>
</tr>
<tr>
<td>333333333333333333333</td>
</tr>
<tr>
<td>333333333333333333333</td>
</tr>
<tr>
<td>333333333333333333333</td>
</tr>
<tr>
<td>333333333333333333333</td>
</tr>
<tr>
<td>333333333333333333333</td>
</tr>
<tr>
<td>333333333333333333333</td>
</tr>
<tr>
<td>333333333333333333333</td>
</tr>
<tr>
<td>333333333333333333333</td>
</tr>
<tr>
<td>333333333333333333333</td>
</tr>
<tr>
<td>333333333333333333333</td>
</tr>
</tbody>
</table>
</div>
</div
</body>
</html>
運行結(jié)果陷遮，
從結(jié)果中我們可以看到實現(xiàn)了表頭固定滓走。
實際上還可以通過定位等方式實現(xiàn)表頭固定的
使用的時候最好使用css或者js控制下寬度！
