利用transform实现表头固定

废话不多说，直接上代码：

html：td部分随便贴

<div class="wrapper" id="wrapper">
        <table class="table">
            <thead class="thead">
                <tr>
                    <th class="th">name</th>
                    <th class="th">sex</th>
                    <th class="th">age</th>
                    <th class="th">hobby</th>
                    <th class="th">remark</th>
                </tr>
            </thead>
        <tbody>
            <tr>
            <td>111</td>
            <td>female</td>
            <td>20</td>
            <td>game</td>
            <td>food</td>
            </tr>
            <tr>
            <td>111</td>
            <td>female</td>
            <td>20</td>
            <td>game</td>
            <td>food</td>
            </tr><tr>
            <td>111</td>
            <td>female</td>
            <td>20</td>
            <td>game</td>
            <td>food</td>
            </tr><tr>
            <td>111</td>
            <td>female</td>
            <td>20</td>
            <td>game</td>
            <td>food</td>
            </tr><tr>
            <td>111</td>
            <td>female</td>
            <td>20</td>
            <td>game</td>
            <td>food</td>
            </tr><tr>
            <td>111</td>
            <td>female</td>
            <td>20</td>
            <td>game</td>
            <td>food</td>
            </tr><tr>
            <td>111</td>
            <td>female</td>
            <td>20</td>
            <td>game</td>
            <td>food</td>
            </tr><tr>
            <td>111</td>
            <td>female</td>
            <td>20</td>
            <td>game</td>
            <td>food</td>
            </tr><tr>
            <td>111</td>
            <td>female</td>
            <td>20</td>
            <td>game</td>
            <td>food</td>
            </tr><tr>
            <td>111</td>
            <td>female</td>
            <td>20</td>
            <td>game</td>
            <td>food</td>
            </tr><tr>
            <td>111</td>
            <td>female</td>
            <td>20</td>
            <td>game</td>
            <td>food</td>
            </tr><tr>
            <td>111</td>
            <td>female</td>
            <td>20</td>
            <td>game</td>
            <td>food</td>
            </tr><tr>
            <td>111</td>
            <td>female</td>
            <td>20</td>
            <td>game</td>
            <td>food</td>
            </tr><tr>
            <td>111</td>
            <td>female</td>
            <td>20</td>
            <td>game</td>
            <td>food</td>
            </tr><tr>
            <td>111</td>
            <td>female</td>
            <td>20</td>
            <td>game</td>
            <td>food</td>
            </tr><tr>
            <td>111</td>
            <td>female</td>
            <td>20</td>
            <td>game</td>
            <td>food</td>
            </tr><tr>
            <td>111</td>
            <td>female</td>
            <td>20</td>
            <td>game</td>
            <td>food</td>
            </tr>
            <tr>
            <td>111</td>
            <td>female</td>
            <td>20</td>
            <td>game</td>
            <td>food</td>
            </tr>
            <tr>
            <td>111</td>
            <td>female</td>
            <td>20</td>
            <td>game</td>
            <td>food</td>
            </tr>
            <tr>
            <td>111</td>
            <td>female</td>
            <td>20</td>
            <td>game</td>
            <td>food</td>
            </tr>
            <tr>
            <td>111</td>
            <td>female</td>
            <td>20</td>
            <td>game</td>
            <td>food</td>
            </tr>
            <tr>
            <td>111</td>
            <td>female</td>
            <td>20</td>
            <td>game</td>
            <td>food</td>
            </tr>
            <tr>
            <td>111</td>
            <td>female</td>
            <td>20</td>
            <td>game</td>
            <td>food</td>
            </tr>
            <tr>
            <td>111</td>
            <td>female</td>
            <td>20</td>
            <td>game</td>
            <td>food</td>
            </tr>
            <tr>
            <td>111</td>
            <td>female</td>
            <td>20</td>
            <td>game</td>
            <td>food</td>
            </tr>
            <tr>
            <td>111</td>
            <td>female</td>
            <td>20</td>
            <td>game</td>
            <td>food</td>
            </tr>
            <tr>
            <td>111</td>
            <td>female</td>
            <td>20</td>
            <td>game</td>
            <td>food</td>
            </tr>
            <tr>
            <td>111</td>
            <td>female</td>
            <td>20</td>
            <td>game</td>
            <td>food</td>
            </tr>
            <tr>
            <td>111</td>
            <td>female</td>
            <td>20</td>
            <td>game</td>
            <td>food</td>
            </tr>
            <tr>
            <td>111</td>
            <td>female</td>
            <td>20</td>
            <td>game</td>
            <td>food</td>
            </tr>
        </tbody>
        </table>
    </div>
复制代码

css部分：

        .wrapper {
            width:600px;
            height:400px;
            border:1px solid red;
            margin:100px auto;
            overflow:auto;
        }
        .table {
            width:100%;
            border:1px solid #ccc;
            border-collapse:collapse;
            text-align:center;
            overflow:auto;
        }
        .table thead th {
            background-color:#ddd;
            line-height:40px;
            font-size:20px
        }
        .table tbody tr td{
            height:20px;
            line-height:20px;
            border-bottom:1px solid #c6c6c6;
            white-space: nowrap;
        }
复制代码

js部分：

        let scrollTop;
        window.onload = function(){
        var wrapper = document.getElementById("wrapper");
        var th_array = document.getElementsByClassName("th");
        wrapper.addEventListener("scroll",function(e){
            scrollTop = e.target.scrollTop-1;//为了减少滑动时距离顶部的间隙
            th_array = [...th_array];
            th_array.forEach(function(ele){
                ele.style.transform = `translate(0,${scrollTop}px)`;
                ele.style.mozTransform = `translate(0,${scrollTop}px)`;
                ele.style.webkitTransform = `translate(0,${scrollTop}px)`;
            })
        })
        }
复制代码

最终效果：