js、css 实现table表头固定

朴灿烈づ我的快乐病毒、 2023-06-20 06:21 15阅读 0赞

![20191208173647300.png][]

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

当然还有一种方法可以实现，就是position：sticky，这是css定位新增属性

[20191208173647300.png]: https://img-blog.csdnimg.cn/20191208173647300.png