如何在对话框中仅使表格内容可滚动？ - Angular 材料

Question

I have an Angular Material Dialog which contains Material Table . I would like to make the table content scrollable (not even the table header). By default, the dialog's content is scrollable which is not what I want. Please see the example here

Answer 1

It can be easily achieved by using flex:

Add dialog.component.scss file to styleUrls of your component with the following rules:

:host,
form  {
  display: flex;
  flex-direction: column;
  height: 100%;
}

form,
.table-body {
  flex: auto;
  overflow-y: auto;
}

Add sticky: true to your table header:

*matHeaderRowDef="displayedColumns; sticky: true"

Forked Stackblitz

Answer 2

Here is the working example:

https://stackblitz.com/edit/angular-material-table-with-form-xuayxj

Just add this style on your table max-height: 200px;overflow:auto; & create mat header row sticky like this:

<mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>