Angular Ui Material Table 具有粘性页眉和页脚，并且还想要一个通用的页眉粘性。如何解决这个问题

Question

我希望我的桌子会像我在材料表文档中给出的那样具有粘性，但当我尝试为 .example-container 提供 100% 高度时，它不会粘住表头 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>

表.组件.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;

}

头文件中，.header是头组件中的类。

当我尝试向 .example-container 类添加 100% 的高度时，它不会粘贴标题。

页面的公共标题与表格重叠。

Answer 1

.example-container {
  height: calc(100% - 64px); /* Subtract the height of the header */
  overflow: auto;
}

table {
  width: 100%;
  margin-top: 64px; /* Adjust margin to accommodate the header */
}

.mat-paginator-sticky {
  bottom: 0;
  position: sticky;
  z-index: 10;
}

.header {
  display: flex;
  height: 64px;
  justify-content: space-between;
  background-color: #3f51b5;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000; /* Ensure the header is above other elements */
}