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.

Answer 2

By limiting your table height. https://stackblitz.com/edit/angular-brzwrz-hkevwi

Answer 3

Give height to your table container :

.example-container {
  height: 400px;
  overflow: auto;
}

Answer 4

Same issue with material expansion table and related example. I solved by setting overflow: hidden in style.css under scr folder, as below:

body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; overflow: hidden; }

and modifying the CSS .example-container in

.example-container {
  height: 100vh;
  overflow: auto;
 }

You will see only the table scrollbar.

Hope help someone