Html 在水平滚动条上看不到垫台背景色

在angular 6应用程序中使用mat table，我无法在水平滚动上正确设置mat标题行和mat行的背景色。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>

{{col.title}}
更多
取消选择
全选
{{filter.name}
找不到此选项卡的公司。。。

我已经尝试了这里建议的解决方案。但是没有一个对我有用