css实现table表头和列固定功能

背景

项目需要用表格展示数据，要求表头和左边两列能够在滚动的时候固定，考虑到目前开源的table组件库冗余了太多项目不需要的功能，其次也是为了防止数据过多的时候渲染太慢，于是决定用html和css实现。

功能

1. 表头固定
2. 左边两类固定
3. 高度要自适应（table默认支持）

思路

使用table的table-layout: fixed属性设置固定列宽，这样才能在左右滚动时计算出偏移量。结合css的position:sticky属性，设置第一行和左右两列粘性定位，其中第二列的偏移量根据第一列的宽度决定，以此类推，如果有三列固定，需要知道前两列的宽度。

table-layout: fixed根据MDN的描述，table-layout用于定义了用于布局表格单元格，行和列的算法，fixed属性值用于表示某一列的宽度仅由该列首行的单元格决定。因此，该单元格所在行之后的行并不会影响整个列宽。

代码实现

  
  

  





  


    


    


      
表头1

      
表头2

      
表头3

      
表头4

      
表头5

    

    

    


    


      


      


      


      


      


    
    


      


      


      


      


      


    

    


      


      


      


      


      


    
    


      


      


      


      


      


    

    


      


      


      


      


      


    
    


      


      


      


      


      


    

    


      


      


      


      


      


    


      
我的高度不固定我的高度不固定我的高度不固定我的高度不固定我的高度不固定我的高度不固定

      


      


      


      


    

    


      


      


      


      


      


    
    


      


      


      


      


      


    

    


      


      


      


      


      


    



    


      


      


      


      


      


    

    


      


      


      


      


      


    



    

  

效果图