html - 如何将标题贴在有 Angular Material 的位置上？

Question

我有一个 Angular Material 的列名称元素。在标题下有一些复选框。

但是如果您在表格中向下滚动，列标题名称也会滚动。但必须贴在他的位置上。

这是 html:

<ng-container matColumnDef="projects">
    <th mat-header-cell *matHeaderCellDef (mouseover)="show = true" (mouseout)="show = false" mat-sort-header i18n>
      <div class="mat-checkbox-project">

          <div class="row" *ngFor="let item of returnProjectCodes; let i = index">
            <mat-checkbox
              (click)="$event.stopPropagation()"
              (change)="filterProjects($event, i, item); selected=i"
              [checked]="selected === i"
              >{{ item.name }}
            </mat-checkbox>
          </div>
      </div>
      <div class="mat-sort-header-button-project">Project</div>
    </th>

    <td mat-cell *matCellDef="let row">{{ row.projects }}</td>
</ng-container>

这是重要的 css:

.mat-sort-header-button-project {
  //position: relative;
  position: fixed;
}

我这样做了:position: fixed，因为这样列标题名称与列名称下的复选框一致。

但现在的问题是，如果在表格中往下走，列标题标题元素会滚动。并且没有坚持他的立场。

那么我必须改变什么，它也坚持立场？

谢谢

Answer 1

无需添加外部 CSS 即可使列/行具有粘性。

引用这个example on stackblitz来自官方文档。

希望这对您有所帮助!