Angular material table sticky headers not working as expected

Question

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?

Answer 1

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.