html - 在水平滚动上看不到垫表背景颜色

Question

在我的 Angular 6 应用程序中使用 mat-table 时，我无法在水平滚动时正确设置 mat-h​​eader-row 和 mat-row 的背景颜色。CSS 属性仅适用于屏幕的可见部分，一旦向右滚动，就不会分配颜色。

请参考这张图片

我的css文件

table {
  width: 100%;
}

.mat-form-field {
  font-size: 14px;
  width: 100%;
}
.mat-column-Name, .mat-column-Lead, .mat-column-Technologies, .mat-column-CollaborationStatus, .mat-column-TimeInPhase, .mat-column-RecentEngagementDate,
.mat-column-Priority, .mat-column-PhaseChangeComments, .mat-column-PhaseUpdated {
  width: 20%;
}

.mat-row:nth-child(even) {
  background-color: #EDEBE6;
  letter-spacing: 0px;
}

.mat-row:nth-child(odd) {
  background-color: white;
  letter-spacing: 0px;
}

.mat-cell {
  font-size: 12px;
  color: #5A575D !important;
}
.mat-header-cell {
  background-color: #B7B09C;
  color: white;
  letter-spacing: 0px;
  text-align: left;
  font-size: 12px;
  padding: 8px 10px;
}


th, td {
  max-width: 30px;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

  td.mat-cell {
    padding: 8px 10px;
  }

tr.mat-header-row{
    height:47px;
}

thead {
  height: 47px;
}

tr.mat-row {
  height: 35px;
}

.mat-elevation-z8 {
  overflow-x: scroll;
}

HTML 文件

<div class="mat-elevation-z8" *ngIf="dataSource && displayedColumnsAll">
  <table mat-table [dataSource]="dataSource" matSort>
    <ng-container *ngFor="let col of displayedColumnsAll;" matColumnDef="{{col.data}}">
      <th mat-header-cell *matHeaderCellDef>
        <span>{{col.title}}</span>
        <span *ngIf="col.filter">
          <button title="Filter data" mat-icon-button [matMenuTriggerFor]="menu" aria-label="Filter data"
            class="crunchbase-menue-overview">
            <mat-icon>more_vert</mat-icon>
          </button>
          <mat-menu #menu="matMenu" xPosition="before">
            <button class="select-deselect-all" mat-menu-item
              (click)="$event.stopPropagation(); selectDeSelectAll(col, false);" *ngIf="checkIfAllSelected(col)">
              Deselect all
            </button>
            <button class="select-deselect-all" mat-menu-item
              (click)="$event.stopPropagation(); selectDeSelectAll(col, true);" *ngIf="!checkIfAllSelected(col)">
              Select all
            </button>
            <button mat-menu-item *ngFor="let filter of filters[col.data];" (click)="$event.stopPropagation();">
              <mat-checkbox color='primary' class="mat-menu-item" [(ngModel)]="filter.checked" (ngModelChange)="applyFilter(col);">
                <b>{{filter.name}}</b></mat-checkbox>
            </button>
          </mat-menu>
        </span>
      </th>
      <td mat-cell *matCellDef="let row"><span (click)="showMore(row, col)" [innerHTML]="transform(col.render(row, col))"></span></td>

    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
  <mat-paginator [length]="100" [pageSize]="10" [pageSizeOptions]="[10, 20,50]" [hidePageSize]="false">
  </mat-paginator>
</div>
<mat-card class="no-record-card" *ngIf="!(dataSource && displayedColumnsAll)">No companies found for this tab...</mat-card>

我已经尝试过这里建议的解决方案Mat-table background color on Horizo​​ntal scroll。但没有一个对我有用。

标签： htmlcssangularangular-material2