Angular 6材质表粘贴标头不起作用

Question

我需要将mat-table组件的Header固定在顶部，但这不起作用。

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

我在matHeaderRowDef上添加了“ sticky：true”属性，就像有人在这里提到的那样，但是它什么也没做:(

<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选项卡。