html - 如何在 thead 中为多行（th 和 tr）应用粘性标题？

Question

我正在尝试为我的数据表以角度材料获取粘性标题（具有多个 tr 和 th）。

这是我下面的css，用于头部应用粘性

scss

thead {
      tr.mat-header-row {
        position: sticky;
        position: -webkit-sticky !important;
        top: 0;
        z-index: 1;
        background-color: inherit !important;
      }
        border: 1px solid rgb(250,250,250);
        background-color: #CCCCCC;
      }
    }

HTML文件

<thead>
    <tr class="mat-header-row" *ngFor="let headerRow of headerData">
      <th *ngFor="let head of headerRow" [attr.rowspan]="head.rowspan" [attr.colspan]="head.colspan" class="mat-header-cell tree-table-header" [matTooltip]="head.name" matTooltipPosition="above">
      </th>
    </tr>
  </thead >

<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
    <mat-tree-node class="mat-row" *matTreeNodeDef="let mynode">...
    </mat-tree-node>
  <mat-tree>

内容应该是可滚动的，标题应该是粘性的，这就是确切的场景。

提前致谢。

标签： htmlcssangularangular-material