This example uses position:sticky on the th elements in the thead andf tfoot to achieve the fixed effect. Browsers that don't support position:sticky will just get a normal table so no harm done.
| Header 1 | Header 2 here | Header 3 with longer content | Header 4 text | Header 5 | Header 6 | Header 7 | Header 8 |
|---|---|---|---|---|---|---|---|
| First top Column | Cell content 2 test |
Cell content longer | Cell content with more content and more content Cell | Cell content | Cell content | Cell content | Cell content |
| Cell content 1 | Cell content 2 test wrapping |
Cell content 3 longer | Cell content 4 | Cell content 5 | Cell content 6 | Cell content 7 | Cell content 8 |
| Cell content 1 | Cell content 2 test wrapping |
Cell content 3 longer | Cell content 4 | Cell content 5 | Cell content 6 | Cell content 7 | Cell content 8 |
| Cell content 1 | Cell content 2 test wrapping |
Cell content 3 longer | Cell content 4 | Cell content 5 | Cell content 6 | Cell content 7 | Cell content 8 |
| Cell content 1 | Cell content 2 test wrapping |
Cell content 3 longer | Cell content 4 | Cell content 5 | Cell content 6 | Cell content 7 | Cell content 8 |
| Cell content 1 | Cell content 2 test wrapping |
Cell content 3 longer | Cell content 4 | Cell content 5 | Cell content 6 | Cell content 7 | Cell content 8 |
| Cell content 1 | Cell content 2 test wrapping |
Cell content 3 longer | Cell content 4 | Cell content 5 | Cell content 6 | Cell content 7 | Cell content 8 |
| Cell content 1 | Cell content 2 test wrapping |
Cell content 3 longer | Cell content 4 | Cell content 5 | Cell content 6 | Cell content 7 | Cell content 8 |
| Cell content 1 | Cell content 2 test wrapping |
Cell content 3 longer | Cell content 4 | Cell content 5 | Cell content 6 | Cell content 7 | Cell content 8 |
| Cell content 1 | Cell content 2 test wrapping |
Cell content 3 longer | Cell content 4 | Cell content 5 | Cell content 6 | Cell content 7 | Cell content 8 |
| Cell content 1 | Cell content 2 test wrapping |
Cell content 3 longer | Cell content 4 | Cell content 5 | Cell content 6 | Cell content 7 | Cell content 8 |
| Cell content 1 | Cell content 2 test wrapping |
Cell content 3 longer | Cell content 4 | Cell content 5 | Cell content 6 | Cell content 7 | Cell content 8 |
| Cell content 1 | Cell content 2 test wrapping |
Cell content 3 longer | Cell content 4 | Cell content 5 | Cell content 6 | Cell content 7 | Cell content 8 |
| Cell content 1 | Cell content 2 test wrapping |
Cell content 3 longer | Cell content 4 | Cell content 5 | Cell content 6 | Cell content 7 | Cell content 8 |
| Cell content 1 | Cell content 2 test wrapping |
Cell content 3 longer | Cell content 4 | Cell content 5 | Cell content 6 | Cell content 7 | Cell content 8 |
| Cell content 1 | Cell content 2 test wrapping |
Cell content 3 longer | Cell content 4 | Cell content 5 | Cell content 6 | Cell content 7 | Cell content 8 |
| Cell content 1 | Cell content 2 test wrapping |
Cell content 3 longer | Cell content 4 | Cell content 5 | Cell content 6 | Cell content 7 | Cell content 8 |
| Cell content 1 | Cell content 2 test wrapping |
Cell content 3 longer | Cell content 4 | Cell content 5 | Cell content 6 | Cell content 7 | Cell content 8 |
| Cell content 1 | Cell content 2 test wrapping |
Cell content 3 longer | Cell content 4 | Cell content 5 | Cell content 6 | Cell content 7 | Cell content 8 |
| Cell content 1 | Cell content 2 test wrapping |
Cell content 3 longer | Cell content 4 | Cell content 5 | Cell content 6 | Cell content 7 | Cell content 8 |
| Bottom cell 1 | Bottom cell 2 test wrapping |
Bottom cell 3 | Bottom cell 4 | Bottom cell 5 | Bottom cell 6 | Bottom cell 7 | Bottom cell 8 |
| Footer 1 | Footer 2 | Footer 3 | Footer 4 | Footer 5 | Footer 6 | Footer 7 | Footer 8 |
Works in modern browsers i.e. Edge, Chrome, Safari/ios and Firefox .Does not work in IE11 or older browsers but no harm done.
All of the other fixed table headers and footers that I've seen are either fixed width or fixed height or need a continuous update with JS and are very janky. This one is very smooth.
See JS Version