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>

大家可以預覽一下：

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

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