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

  • Post author:
  • Post category:其他




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);
    }



版权声明:本文为chansanity原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。