Angular 6 Material Table Sticky Header 不起作用

Question

我需要让mat-table组件的Header固定在顶部，但是没有用。

我有 Angular v6.1.7 和 @angular/material v6.4.7。

我将“sticky: true”属性添加到 matHeaderRowDef 中作为 someone mentions here但它什么也没做:(

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

我有这个示例项目:https://stackblitz.com/edit/angular-wem2qa

这是我对 TS 文件的导入:

import { Component, Input, OnChanges, OnInit, SimpleChanges, ViewChild } from "@angular/core";
import { MatDialog, MatExpansionPanel, MatSnackBar, MatSort, MatTableDataSource, Sort } from "@angular/material";

Answer 1

您的问题可能不是粘滞行本身。您需要在表格周围添加一个容器，以确保一行可以粘在顶部，这些样式例如:

.example-container {
  height: 400px;
  overflow: auto;
}

请参阅 Angular Material 文档中的示例:https://material.angular.io/components/table/overview#sticky-rows-and-columns并检查 CSS 选项卡。