Angular: Sticky things on table header

Question

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!

Akber Iqbal · Accepted Answer · 2019-09-06 07:14:38Z

1

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

answered Sep 6, 2019 at 7:14

Akber Iqbal

15.1k12 gold badges54 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular: Sticky things on table header

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related