Sticky Table Header Doesnt Work In Angular Materials Mat-sidenav-container

Heyho, I have some trouble with html/css tables and sticky headers when using angular material. In my project I use angular materials sidenav with , &l

Solution 1:

Removing/overriding overflow properties of mat-sidenav-container and mat-sidenav-content will fix the issue

Angular Material will auto generate mat-sidenav-content if its not set.

navigation.component.sass

mat-sidenav-container, mat-sidenav-contentoverflow: initial

thx to all who visited this question!

Solution 2:

Use position:fixed instead of sticky along with width:100% hope this will help.

for example:

app-table-header {
    font-size: 1.2em;
    font-weight: 700;
    position: fixed;
    top: 64px;
    z-index: 10;
    width: 100%;
    background: #fafafa;
}

i have added same table background color for app-table-header so it will look better.