table 鎖定表頭，出滾動對齊

前一段時間來了一個彙總的需求，想鎖定表頭，這個問題在網上找了老半天，實現起來都比較麻煩，通過這幾天的摸索終於找到一個簡潔的處理方法

下面介紹一下如何處理的：

一、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>

你們能夠預覽一下：

表頭一	表頭一	表頭一	表頭一	表頭一	表頭一	表頭一	表頭一

表頭一	表頭一	表頭一	表頭一	表頭一	表頭一	表頭一	表頭一
表頭一	表頭一	表頭一	表頭一	表頭一	表頭一	表頭一	表頭一
表頭一	表頭一	表頭一	表頭一	表頭一	表頭一	表頭一	表頭一
表頭一	表頭一	表頭一	表頭一	表頭一	表頭一	表頭一	表頭一
表頭一	表頭一	表頭一	表頭一	表頭一	表頭一	表頭一	表頭一
表頭一	表頭一	表頭一	表頭一	表頭一	表頭一	表頭一	表頭一
表頭一	表頭一	表頭一	表頭一	表頭一	表頭一	表頭一	表頭一
表頭一	表頭一	表頭一	表頭一	表頭一	表頭一	表頭一	表頭一
表頭一	表頭一	表頭一	表頭一	表頭一	表頭一	表頭一	表頭一
表頭一	表頭一	表頭一	表頭一	表頭一	表頭一	表頭一	表頭一
表頭一	表頭一	表頭一	表頭一	表頭一	表頭一	表頭一	表頭一