Angular 6 Material Table 粘性 Header 不起作用

Question

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

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

我将 "sticky: true" 属性添加到 matHeaderRowDef 作为但它没有做任何事情:(

<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

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

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

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

Answer 2

IE 似乎不再支持了。摘自 the documentation：

This feature is supported by Chrome, Firefox, Safari, and Edge. It is not supported in IE, but it does fail gracefully so that the rows simply do not stick.

另一种方法是手动处理，从 Javascript 开始，但对于像 IE 这样的旧浏览器来说，这会非常昂贵。

Answer 3

如果您正在研究 <mat-tab-group>，他们就是与此相关的问题。

部分案例相关解决方案详解：https://github.com/angular/components/issues/16283

Angular 6 Material Table 粘性 Header 不起作用

Angular 6 Material Table Sticky Header doesn't work

angular-material

angular

angular-material-6