html table theader,javascript - HTML table with sticky header, footer, column AND scrollable tbody (...

Update: I found solution which satisfy me for this very moment. Actually there is a way to create two separate divs with table parts and couple them by scroll position (it can be done by pure JS). I think it's similiar solution to https://datatables.net/examples/basic_init/scroll_xy.html. I developed something like this (inside my React app):

...

...

Event is handled in this way:

handleBodyScroll(event) {

const tbody = document.getElementById('tbody_scroll');

const thead = document.getElementById('thead_scroll');

thead.scrollLeft = tbody.scrollLeft;

}

We are operating directly on DOM and scrolling looks smoothly. In this solution header is always above tbody, another elements may be sticky. One last issue I've noticed is scrollbar position which makes minor displacement in extreme position (max X), but I hope it can be solved by some measurement...