Fix columns of a MatTable

I want to fix the first two columns of the table. With "sticky" it works, but the problem is that when I move my cursor, the rest of the columns go behind the first two, but this makes the columns appear in 3D... whereas what I want is that when I move the cursor, the columns really go behind and are hidden.

Here is an example of what I want: 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;
}
...
....

Giving a background property is causing this while clicking on the row to highlight. Because in my css i have this : When i click on the row, it changes the background, but with your fix, i set a background to the column... :(

.highlight{
  background: #e0e0e0;
}

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

Solution

You can give background-color and z-index (if needed) to sticky columns.