Despite following the documentation for a sticky table header, I encountered an issue where setting the height of .example-container to 100% did not make the table's header stick as intended. table.component.html
<div class="example-container mat-elevation-z8" tabindex="0">
<table mat-table matSort [dataSource]="userdata">
<!--Table Content--!>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns; let i = index"
[ngClass]="i % 2 === 0 ? 'even-row' : 'odd-row'"></tr>
</table>
</div>
<mat-paginator [pageSize]="15" [pageSizeOptions]="[5, 10, 25, 100]" showFirstLastButtons></mat-paginator>
table.component.cs
.example-container {
height: 100%;
overflow: auto;
}
table {
width: 100%;
margin-top:50px
}
.mat-paginator-sticky {
bottom: 0px;
position: sticky;
z-index: 10;
}
header.component.css
.header {
display: flex;
height: 64px;
/* width:446px; */
justify-content: space-between;
background-color: #3f51b5;
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
}
In the header file, .header is a class in the header component.
When attempting to apply a 100% height to the .example-container class, the header failed to remain fixed.
This led to an overlap between the common page header and the table itself.