I am working on a medium-sized project where we need to display some information in a complex table. The headers need to be sticky, so that when you scroll down the page, the header sticks to the top of the table.
As I want to support IE and earlier versions of Chrome, I DO NOT want to be using the position: sticky;. I do not mind it involving a bit of JS, as my previous attempts for this has also included that.
I've already gone the way, of simply making doing this by JS and making the position: fixed; when the user scrolled further down that the table header. Yet also this seems to have the same trouble as illustrated in the stackblitz further down.
This makes me consider that it might have something with the sizing I'm not getting right.
I've looked a bit into the using of Angular Sticky Things. I just can wrap my head around how to use this library in the given context:
I have a Stackblitz with example usage of this.
I would love if someone could give me a hint as to how on earth, this should be made.
I expect that the whole thead moves down, without scaling itself or scaling the rest of the table!
I added the first CSS line with display:inherit to get closer to what you would want... width property is for matching the width between the sticky header and the rest of the table...
thead.is-sticky{display:inherit;width:calc(100vw - 35px)!important;}
The only limitation which remains is the limitation of the table. For e.g. if the heading is too big it messes up the look on smaller screens, so we break the word, hence this second CSS line:
th, tr{word-break: break-word;}
I forked your stackblitz with these changes here