js、css 实现table表头固定-蒲公英云

js、css 实现table表头固定

<div id='table-cont' style="max-height: 150px;width: 540px;overflow: scroll;">
    <table>
        <thead>
            <tr align="center" style="background: #dcdcdc;">
                <th style="width:100px;">用户编号</th>
                <th>试用时间</th>
                <th>转正时间</th>
                <th>性别</th>
                <th>姓名拼音</th>
                <th>生日时间</th>
                <th>民族</th>
                <th>身高</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>2000001</td>
                <td>1997-3-13</td>
                <td>1997-3-13</td>
                <td>1</td>
                <td>WZJ</td>
                <td>1965-3-13</td>
                <td>汉</td>
                <td>171</td>
            </tr>
            <tr>
                <td>2000045</td>
                <td>2001-2-15</td>
                <td>2001-3-15</td>
                <td>0</td>
                <td>WY</td>
                <td>1978-8-5</td>
                <td>汉</td>
                <td>162</td>
            </tr>
            <tr>
                <td>2000046</td>
                <td>2001-2-23</td>
                <td>2001-3-23</td>
                <td>0</td>
                <td>LQ</td>
                <td>2001-2-23</td>
                <td>汉</td>
                <td>171</td>
            </tr>
            <tr>
                <td>2000046</td>
                <td>2001-2-23</td>
                <td>2001-3-23</td>
                <td>0</td>
                <td>LQ</td>
                <td>2001-2-23</td>
                <td>汉</td>
                <td>171</td>
            </tr>
            <tr>
                <td>2000046</td>
                <td>2001-2-23</td>
                <td>2001-3-23</td>
                <td>0</td>
                <td>LQ</td>
                <td>2001-2-23</td>
                <td>汉</td>
                <td>171</td>
            </tr>
            <tr>
                <td>2000046</td>
                <td>2001-2-23</td>
                <td>2001-3-23</td>
                <td>0</td>
                <td>LQ</td>
                <td>2001-2-23</td>
                <td>汉</td>
                <td>171</td>
            </tr>
            <tr>
                <td>2000046</td>
                <td>2001-2-23</td>
                <td>2001-3-23</td>
                <td>0</td>
                <td>LQ</td>
                <td>2001-2-23</td>
                <td>汉</td>
                <td>171</td>
            </tr>
            <tr>
                <td>2000046</td>
                <td>2001-2-23</td>
                <td>2001-3-23</td>
                <td>0</td>
                <td>LQ</td>
                <td>2001-2-23</td>
                <td>汉</td>
                <td>171</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>