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>

大家可以预览一下：

表头一	表头一	表头一	表头一	表头一	表头一	表头一	表头一

表头一	表头一	表头一	表头一	表头一	表头一	表头一	表头一
表头一	表头一	表头一	表头一	表头一	表头一	表头一	表头一
表头一	表头一	表头一	表头一	表头一	表头一	表头一	表头一
表头一	表头一	表头一	表头一	表头一	表头一	表头一	表头一
表头一	表头一	表头一	表头一	表头一	表头一	表头一	表头一
表头一	表头一	表头一	表头一	表头一	表头一	表头一	表头一
表头一	表头一	表头一	表头一	表头一	表头一	表头一	表头一
表头一	表头一	表头一	表头一	表头一	表头一	表头一	表头一
表头一	表头一	表头一	表头一	表头一	表头一	表头一	表头一
表头一	表头一	表头一	表头一	表头一	表头一	表头一	表头一
表头一	表头一	表头一	表头一	表头一	表头一	表头一	表头一