在web前端开发中，让表头固定，不随滚动条的滚动而滚动。是很多人都会遇到的需求。
下面来水下如何简单的实现
先看下初始代码
<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出现滚动条。
运行结果如下所示：
可以看到两图对比，表头没有固定
开始实现表头固定。
原理：在当前div外面在放一个table,这个tablez=只用来盛饭表头，最后在外面在嵌套一个div,把他们全部包含其，这样就能简单的实现了。
代码如下：
<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>
运行结果，
从结果中我们可以看到实现了表头固定。
实际上还可以通过定位等方式实现表头固定的
使用的时候最好使用css或者js控制下宽度！
