Html 给垫子桌一个高度，并使垫子行可滚动

我有一张垫子桌子：

 <div class="card-body">
    <table mat-table [dataSource]="filteredEntries">
      <ng-container matColumnDef="date">
        <th mat-header-cell *matHeaderCellDef>Date</th>
        <td mat-cell *matCellDef="let dailyEntry">{{dailyEntry.date | date:'shortDate'}}</td>
      </ng-container>
      // more columns...
      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
      <tr mat-row *matRowDef="let row; columns:displayedColumns;"
          [class.cal-day-selected]="row.date.isSame(selectedDay)"
          [class.highlighted-daily-entry]="row === highlightedDailyEntry"
          [class.highlight-selected]="dailyEntriesActionQueue.includes(row) && inBackoffice"
          (click)="onRowClick($event, row)"></tr>
    </table>
  </div>

但这显然会在整个表中添加一个滚动条，而不仅仅是

mat行

。将

overflow-y

和/或

height

应用于

mat行

没有任何作用。有没有人知道如何给表格增加一个高度，并且在超过高度时只使

mat行可滚动

编辑：
我基本上是让它的工作完全一样，在这张贴在评论。这很好，但不是从表格顶部开始的滚动条，我希望它在标题之后开始

因此，与此相反（从表的顶部开始）

我希望它看起来像这样（从标题后面开始，黑色条代表滚动条）

当前的物料表实现无法做到这一点。
但是，通过将表头行元素从表中移动到上面的包装元素中，您可以很容易地（但不是很优雅地）解决此问题：

ngAfterViewInit() {
    const headerRow = document.querySelector('mat-header-row');
    const matTable = document.querySelector('mat-table');
    const tableContainer = document.querySelector('.example-container');
    if (tableContainer && headerRow && matTable) {
      tableContainer.insertBefore(headerRow, matTable);
    }
  }

然后在CSS文件中将包装器的溢出设置为隐藏，将表的高度设置为100%，并将溢出设置为自动。我还更改了包装器的flex布局：

.example-container {
  height: 400px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

mat-table {
  width: 100%;
  overflow: auto;
  height: 100%;
}

请注意，我还改为使用material表元素而不是attributes，这使您不再使用html表元素

请参见此处的工作示例：

从外观上看，你做得很好，但是你能在
stackblitz
上制作你的代码示例吗？是的，我让它像你发布的stackblitz一样工作。我编辑了我的原始帖子，以可视化我想要实现的目标。我做了一些修改，可以满足您的搜索需求。但是看起来有点脏。
.example-container {
  height: 400px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

mat-table {
  width: 100%;
  overflow: auto;
  height: 100%;
}