js通过transform实现固定（冻结）表格列

左手的ㄟ右手 2023-06-20 06:21 3阅读 0赞

![20191208182205343.png][]

<div id='table-cont' style="max-height: 150px;width: 540px;overflow: scroll;">
        <table style="width:800px;">
            <thead>
                <tr style="background: #dcdcdc;">
                    <th class="drag_user" style="background: #dcdcdc;">用户编号</th>
                    <th>试用时间</th>
                    <th>转正时间</th>
                    <th>性别</th>
                    <th>姓名拼音</th>
                    <th>生日时间</th>
                    <th>民族</th>
                    <th>身高</th>
                </tr>
            </thead>
            <tbody>
                <tr style="background: white;">
                    <td class="drag_user" style="background: white;">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 class="drag_user" style="background: white;">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 class="drag_user" style="background: white;">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 class="drag_user" style="background: white;">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 class="drag_user" style="background: white;">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 class="drag_user" style="background: white;">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 class="drag_user" style="background: white;">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 class="drag_user" style="background: white;">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;
            var scrollLeft = event.target.scrollLeft;
            event.target.querySelector('thead').style.transform = 'translateY(' + scrollTop + 'px)';
            var dragUsers = event.target.querySelectorAll('.drag_user');
            for (i = 0; i < dragUsers.length; i++) {
                dragUsers[i].style.transform = 'translateX(' + scrollLeft + 'px)';
            }
        }
        tableCont.addEventListener('scroll', scrollHandle);
    </script>

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