table表头固定方法

思路监听滚动然后利用css3的translateY属性位移表头即可

 <div id='table-cont' style="max-height: 150px;width: 540px;overflow: scroll;">
        <table>
            <thead>
                <tr align="center" style="background: #dcdcdc;">
                    <th>头1</th>
                    <th>头1</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>内容1</td>
                    <td>内容2</td>
                </tr>
                <tr>
                    <td>内容1</td>
                    <td>内容2</td>
                </tr>
                <tr>
                    <td>内容1</td>
                    <td>内容2</td>
                </tr>
                <tr>
                    <td>内容1</td>
                    <td>内容2</td>
                </tr>
                <tr>
                    <td>内容1</td>
                    <td>内容2</td>
                </tr>
                <tr>
                    <td>内容1</td>
                    <td>内容2</td>
                </tr>
                <tr>
                    <td>内容1</td>
                    <td>内容2</td>
                </tr>
                <tr>
                    <td>内容1</td>
                    <td>内容2</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script type="text/javascript">
      var tableCont = document.querySelector('#table-cont');
      function scrollHandle (event){
        var scrollTop = event.target.scrollTop;
        event.target.querySelector('thead').style.transform = 'translateY(' + scrollTop +'px)';
      }  
      tableCont.addEventListener('scroll',scrollHandle);
    </script>