1. Pure CSS implementation

The sticky positioning of the CSS is position:sticky

The compatibility of attributes is as follows:

Main achievements:

Add position:sticky to th in thead (top,left,right,bottom); The background color of the table header is transparent during scrolling, so you need to set the background color.

Effect:

2. JQuery plug-in Datatable implementation

Datatables website :datatables.net/

Using datatables expand fixedHeader, address is: datatables.net/extensions/…

When the datatable is initialized, three additional configuration attributes are added:

{
          scrollY: "200px",          
          scrollX: true, 
          scrollCollapse: true
}
Copy the code

Effect:

3. Vue component library elementUI implementation

Vue implementation, official website address :cn.vuejs.org/v2/guide/

Address of elementUI’s table component :element.eleme.cn/#/zh-CN/com…

Component directly provided in the header fixed implementation, direct use.

Effect:

4. Another implementation of pure CSS

Inspired by the datatables header fixing:

There are two tables, one for displaying the table header and the other for scrolling

Set the table header height to 0 and the outer layer of div to overflow-y:auto; And height, which allows the table to scroll.

Faults: a bit of dislocation

Effect:

5. The source code

Source code address :github.com/snailsmail/…