前端-页面图表-表头固定(JS实现)

html

<div class="small-table">
     <table cellspacing="0">
        <thead>
             <tr>
               <td>质控点编号</td>
               <td>质控点名称</td>
               <td>车身组件名称</d>
               <td>车身号</td>
               <td>缺陷编号</td>
               <td>缺陷名称</td>
               <td>缺陷分析</td>
               <td>操作</td>
            </tr>
            </thead>
       <tbody id="bottom-mian-table"></tbody>
   </table>
</div> 

Js

window.onload = function () {
        let tableCont = document.querySelector('.small-table');
        function scrollHandle(e) {
            let scrollTop = this.scrollTop;
            this.querySelector('thead').style.transform = 'translateY(' + scrollTop + 'px)';
        }

        tableCont.addEventListener('scroll', scrollHandle);
    }