Angular material table sticky headers not working as expected

Issue

I forked the example on angular material table with sticky header and I added more data. I see that the headers are not sticky. Stackblitz here

Anyone knows how headers can remain sticky?

Solution

The problem in your example is that the table container has overflow: auto and height: 100%; this is unnecessary, since the page will already have a scrollbar attached if the table content is bigger than the viewport.

I’ve fixed it by removing all the styles that are attached to .example-container.

In this way, the sticky element will be set relative to the top of the page.

Example:
https://stackblitz.com/edit/angular-brzwrz-aejes6

Let me know if it works for you.

Answered By – andreivictor

Answer Checked By – Marie Seifert (AngularFixing Admin)

Leave a Reply

Your email address will not be published.