table 锁定表头，出滚动对齐
前一段时间来了一个汇总的需求，想锁定表头，这个问题在网上找了老半天，实现起来都比较麻烦，经过这几天的摸索终于找到一个简洁的处理方法
下面介绍一下如何处理的：
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>
大家可以预览一下：
| 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 |
|---|
| 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 |
| 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 |
| 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 |
| 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 |
| 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 |
| 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 |
| 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 |
| 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 |
| 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 |
| 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 |
| 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 | 表头一 |
