给垫台一个高度，并使垫行可滚动

Question

我有一张席子桌子：

private void BgColor_Tapped(object sender, TappedRoutedEventArgs e)
{
    var ellipse = sender as Ellipse;
}

我想给桌子（或垫子行）一个高度，并在需要时使 <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-row和mat-table都没有任何影响。我可以通过添加包装器类mat-row来做到这一点：

card-body

但是显然，这会向整个表添加滚动条，而不仅仅是.card-body { height: 80vh; overflow-y: scroll; } 。将mat-row和/或overflow-y应用于height不会执行任何操作。有没有人知道如何在桌子上增加高度，并在高度超过mat-row时才使它滚动？

编辑： 我基本上是按照评论中发布的stackblitz的方式使其正常工作。没问题，但是我希望滚动条从表的顶部开始，而不是从表的顶部开始。

因此而不是这个（从表格顶部开始）

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

Answer 1

当前材料表实现无法做到这一点。 但是，您可以很轻松地但不是那么优雅地解决问题，方法是将表头行元素从表中移到上方的包装元素中：

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％，将溢出设置为auto。我还更改了包装的flex布局：

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

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

请注意，我还更改为使用材料表元素而不是属性，这使您不必使用html表元素。

在此处查看工作示例：

https://stackblitz.com/edit/angular-fnale6