修复 MatTable 的列

Question

我想修复 table 的前两列。使用“粘性”它可以工作，但问题是当我移动光标时，其余列位于前两列后面，但这使得列以 3D 形式出现......而我想要的是当我移动游标，这些列真的在后面并且被隐藏了。

这是我想要的示例：https://stackblitz.com/edit/angular-khhz71?file=src/app/table-sticky-columns-example.css


<div class="col-lg-12">
    <nb-card class="inline-form-card">

      <nb-card-body>
        <mat-table matTableExporter [dataSource]="dataSourcefilter" matSort matSortActive="project" matSortDirection="desc" matSortDisableClear
          class="mat-elevation-z8" #exporter="matTableExporter">

          <ng-container matColumnDef="project" sticky>
            <mat-header-cell *matHeaderCellDef mat-sort-header>Nom du projet</mat-header-cell>
            <mat-cell *matCellDef="let element"> {{element.project}} </mat-cell>
          </ng-container>

          <ng-container matColumnDef="namespacePreProd" sticky>
            <mat-header-cell *matHeaderCellDef mat-sort-header>Namespace (Pré-prod)</mat-header-cell>
            <mat-cell *matCellDef="let element">
              <span title="{{element.namespacePreProd}}">{{element.namespacePreProd}}</span>
            </mat-cell>
          </ng-container>

          <ng-container matColumnDef="namespaceProd">
            <mat-header-cell *matHeaderCellDef mat-sort-header>Namespace (Prod)</mat-header-cell>
            <mat-cell *matCellDef="let element">
              <span title="{{element.namespaceProd}}">{{element.namespaceProd}}</span>
            </mat-cell>
          </ng-container>
...
...
...
<mat-header-row *matHeaderRowDef="displayedColumnsOne"></mat-header-row>
          <mat-row *matRowDef="let row; columns: displayedColumnsOne;" [ngClass]="{'highlight': selectedRowIndex == row.id}"
                (click)="highlight(row)"></mat-row>

        </mat-table>
      </nb-card-body>

.mat-table {
  position: relative;
  overflow: auto;
  // max-height: 500px;
  width:100%;
  height:100%;
}

.mat-row, .mat-header-row {
  min-width: 2400px;
  width:100%;
}

.mat-column-kaliosNumber {
  flex: 0 5%;
  justify-content: center;
}

.mat-column-snowChangeNumber {
  flex: 0 6%;
  justify-content: center;
}

.mat-column-comment {
  flex: 0 10%;
  justify-content: center;
}
...
....

提供背景属性导致在单击要突出显示的行时出现此问题。因为在我的 css 中我有这个：当我单击该行时，它会更改背景，但是通过您的修复，我为该列设置了背景...:(

.highlight{
  background: #e0e0e0;
}

.nb-theme-dark .highlight{
  background: #151a30;
}

Answer 1

您可以将 background-color 和 z-index（如果需要）添加到粘性列。

修复 MatTable 的列

Fix columns of a MatTable

html

css

angular

angular-material-table