html固定table表头的实现思路

实现步骤
1.将table放在可滚动容器中;
2.可滚动容器外层还需要一个容器,这个容器需设置超出范围隐藏和定位(相对、绝对都行);
3.利用脚本克隆一个目标table,调整克隆table的列宽与原table相同,隐藏tbody,追加到外层的容器中;
4.监听滚动容器的滚动事件,动态调整克隆table的左偏移,上偏移不需要调整,因为已经固定了。

效果演示









   
       
           
               
               
           
       
       
            
       
   
列1列2列3列4列5列6列7列8列9列10







WEB前端学习交流群21 598399936



你可能感兴趣的:(html固定table表头的实现思路)