前一段时间来了一个汇总的需求，想锁定表头，这个问题在网上找了老半天，实现起来都比较麻烦，经过这几天的摸索终于找到一个简洁的处理方法
下面介绍一下如何处理的：
1、thead 和tbody 放两个table里面 主要是让表头的父容器padding-right: 17px; 17px是滚动条的宽度，可以通过js动态求出滚动条的宽度，然后设置父容器的宽度即可
<div style="width: 100%;">
<!--表头-->
<div id="mytable" style="width: 100%; padding-right: 17px;">
<table style="width: 100%;">
<tr>
<th>
表头一
</th>
<th>
表头一
</th>
<th>
表头一
</th>
<th>
表头一
</th>
<th>
表头一
</th>
<th>
表头一
</th>
<th>
表头一
</th>
<th>
表头一
</th>
</tr>
</table>
</div>
<div id="container" style="width: 100%; overflow-y: scroll; height: 100px;">
<table style="width: 100%;">
<tr>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
</tr>
<tr>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
</tr>
<tr>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
</tr>
<tr>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
</tr>
<tr>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
</tr>
<tr>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
</tr>
<tr>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
</tr>
<tr>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
</tr>
<tr>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
</tr>
<tr>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
<tr>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
<td>
表头一
</td>
</tr>
</tr>
</table>
</div>
<div>
</div>
</div>
大家可以预览一下：
| 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 |
|---|
| 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 |
| 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 |
| 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 |
| 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 |
| 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 |
| 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 |
| 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 |
| 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 |
| 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 |
| 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 |
| 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 |