表格列固定

时间：2020-03-12 00:10:21 阅读：71 评论：0 收藏：0 [点我收藏+]

对于单表格，表头固定以及第一列固定

对tbody设置宽高，溢出的采用overflow:auto

对tbody的滚动条事件监听，第一列采用translatex方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div{
        position: relative;
    }
    table{
        border-collapse: collapse;
        table-layout: fixed;
    }
    th{
        padding: 10px 25px;
        background-color: #3498db;
    }
    td{
        padding: 10px 14px;
        border: 1px solid black;
    }
    tbody{
        display: block;
        height: 200px;
        width: 214px;
        overflow: auto;
    }
    thead{
        display: block;
        width: 200px;
        overflow: hidden;
    }
    th:nth-child(1){
        background: #1abc9c;
    }
    .td-1{
        background: #ecdada;
    }
</style>
<body>
    <div>
        <table>
            <thead>
                <tr id="theadtr">
                    <th id="theadth">1</th>
                    <th>2</th>
                    <th>3</th>
                    <th>4</th>
                    <th>5</th>
                </tr>
            </thead>
            <tbody id="tbodyZone">
                <tr>
                    <td class="td-1">111</td>
                    <td>222</td>
                    <td>333</td>
                    <td>444</td>
                    <td>555</td>
                </tr>
                <tr>
                    <td class="td-1">111</td>
                    <td>222</td>
                    <td>333</td>
                    <td>444</td>
                    <td>555</td>
                </tr>
                <tr>
                    <td class="td-1">111</td>
                    <td>222</td>
                    <td>333</td>
                    <td>444</td>
                    <td>555</td>
                </tr>
                <tr>
                    <td class="td-1">111</td>
                    <td>222</td>
                    <td>333</td>
                    <td>444</td>
                    <td>555</td>
                </tr>
                <tr>
                    <td class="td-1">111</td>
                    <td>222</td>
                    <td>333</td>
                    <td>444</td>
                    <td>555</td>
                </tr>
                <tr>
                    <td class="td-1">111</td>
                    <td>222</td>
                    <td>333</td>
                    <td>4444</td>
                    <td>555</td>
                </tr>
                <tr>
                    <td class="td-1">111</td>
                    <td>222</td>
                    <td>333</td>
                    <td>4444</td>
                    <td>555</td>
                </tr>
                <tr>
                    <td class="td-1">111</td>
                    <td>222</td>
                    <td>333</td>
                    <td>4444</td>
                    <td>555</td>
                </tr>
                <tr>
                    <td class="td-1">111</td>
                    <td>222</td>
                    <td>333</td>
                    <td>4444</td>
                    <td>555</td>
                </tr>
                <tr>
                    <td class="td-1">111</td>
                    <td>222</td>
                    <td>333</td>
                    <td>4444</td>
                    <td>555</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
<script>
    window.onload = function(){
        let tds = document.querySelectorAll(‘.td-1‘);
        let theads = document.getElementById("theadtr");
        let theadth = document.getElementById("theadth");

        document.getElementById("tbodyZone").addEventListener("scroll", function(event){
            let offsetleft = event.target.scrollLeft;

            tds.forEach(function(td,index){
                td.style.transform = ‘translateX(‘ + offsetleft + ‘px)‘;
            });

            theads.style.transform = ‘translateX(-‘ + offsetleft + ‘px)‘;
            theadth.style.transform = ‘translateX(‘ + offsetleft + ‘px)‘;
        })
    }
</script>
</html>

表格未滚动时

技术分享图片

滚动条拖动后
技术分享图片

表格列固定

原文：https://www.cnblogs.com/feiyangyao/p/12466400.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)