Chrome中仅支持CSS的粘性表标题

position:sticky不适用于Chrome中的某些表元素(thead/tr).您可以将粘性移动到需要粘贴的tds/ths.像这样:

.table {
  thead tr:nth-child(1) th{
    background: white;
    position: sticky;
    top: 0;
    z-index: 10;
  }
}

这也行.

.table {
    position: sticky;
    top: 0;
    z-index: 10;
}

您可以将标题移动到单独的布局.例如:

    

    

        
1
        
2
        
3
        
4
    
    


    

    

        
1
        
2
        
3
        
4
    
    

        
1
        
2
        
3
        
4
    
    

        
1
        
2
        
3
        
4
    

对于那些仍在寻找解决方案并且对已接受的解决方案不满意的人.

1)在元素上使用粘性顶级类.

2)有自己的班级

th.sticky-header {
  position: sticky;
  top: 0;
  z-index: 10;
  /*To not have transparent background.
  background-color: white;*/
}