Цвет фона мат-таблицы на горизонтальной прокрутке

Используя mat-table в моем приложении angular 6, я не могу правильно установить цвет фона для mat-header-row и mat-row при горизонтальной прокрутке. Свойство CSS применяется только к видимой части экрана, при прокрутке вправо цвет не назначается.

В моей таблице около 30 столбцов, поэтому мне обязательно нужна горизонтальная прокрутка.

Мой CSS выглядит следующим образом:

.mat-toolbar {
    font-size: 17px;
    font-family: inherit;
    background-color: indigo;
    max-height: 12vh;
}

.mat-elevation-z8 {
    padding: 0px;
}

.mat-table {
    overflow: auto;
    max-height: 68vh;
    min-width: 100%;
}

.mat-header-row {
    position: sticky;
    top: -.5px;
    z-index: 100;
    background-color: gainsboro;
    font-size: 12px;
    min-height: 8vh;
    color: #f5f5f5;
    padding-top: 3px;
}

.mat-row:nth-child(even) {
    background-color: floralwhite;
}

.mat-row:nth-child(odd) {
    background-color: gainsboro;
}

.mat-row {
    min-height: 8vh;
}

.no-results {
    display: flex;
    justify-content: center;
    padding: 12px;
    font-size: 12px;
    font-style: italic;
    font-family: inherit;
}

.mat-cell {
    font-family: inherit;
    font-size: 12px;
}

.mat-header-cell {
    font-size: 12px;
    font-weight: bolder;
}

.mat-cell:nth-child(1),
.mat-header-cell:nth-child(1) {
    flex: 0 0 6%;
}

.mat-cell:nth-child(2),
.mat-header-cell:nth-child(2) {
    flex: 0 0 9%;
}

.mat-cell:nth-child(3),
.mat-header-cell:nth-child(3) {
    flex: 0 0 14%;
}

.mat-cell:nth-child(4),
.mat-header-cell:nth-child(4) {
    flex: 0 0 10%;
}

.mat-cell:nth-child(5),
.mat-header-cell:nth-child(5) {
    flex: 0 0 10%;
}

.mat-cell:nth-child(6),
.mat-header-cell:nth-child(6) {
    flex: 0 0 8%;
}

.mat-cell:nth-child(7),
.mat-header-cell:nth-child(7) {
    flex: 0 0 9%;
}

.mat-cell:nth-child(8),
.mat-header-cell:nth-child(8) {
    flex: 0 0 8%;
}

.mat-cell:nth-child(9),
.mat-header-cell:nth-child(9) {
    flex: 0 0 8%;
}

.mat-cell:nth-child(10),
.mat-header-cell:nth-child(10) {
    flex: 0 0 9%;
}

.mat-cell:nth-child(11),
.mat-header-cell:nth-child(11) {
    flex: 0 0 8%;
}

.mat-cell:nth-child(12),
.mat-header-cell:nth-child(12) {
    flex: 0 0 11%;
}

.mat-cell:nth-child(13),
.mat-header-cell:nth-child(13) {
    flex: 0 0 7%;
}

.mat-cell:nth-child(14),
.mat-header-cell:nth-child(14) {
    flex: 0 0 11%;
}

.mat-cell:nth-child(15),
.mat-header-cell:nth-child(15) {
    flex: 0 0 7%;
}

.mat-cell:nth-child(16),
.mat-header-cell:nth-child(16) {
    flex: 0 0 8%;
}

.mat-column-name {
    border-right: 1px solid grey;
    align-self: stretch;
    text-align: center;
}

.mat-column-position {
    border-right: 1px solid grey;
    align-self: stretch;
    text-align: center;
}

.mat-column-weight {
    border-right: 1px solid grey;
    align-self: stretch;
    text-align: center;
}

.mat-column-symbol {
    text-align: center;
    align-self: stretch;
}

.mat-column-weight {
    align-self: stretch;
}

Пытался установить свойство переполнения отдельно для mat-header-row и mat-row; он разрешает цвет фона, но затем строки заголовка и строки данных можно прокручивать отдельно без синхронизации.

HTML-файл выглядит следующим образом:

<div [@routerTransition] class = "col-md-12 mat-elevation-z8" class = "white-space-pre-line">
    <mat-toolbar color = "primary">
        Project Times Overview Report
        <span class = "spacer"></span>
        <mat-select *ngxPermissionsOnly = "['attendance-all-leave-balance-read']" name = "year" [(ngModel)] = "selectedYear"
            class = "form-control" type = "text" placeholder = "Year" required>
            <mat-option *ngFor = "let year of yearName" [value] = "year">{{year}}</mat-option>
        </mat-select> &nbsp;
        <button class = "btn btn-sm btn-primary" *ngxPermissionsOnly = "['attendance-all-leave-balance-read']" [disabled] = "selectedYear==''"
            (click) = "loadData()">View Report</button>
    </mat-toolbar>

    <div class = "form">
        <mat-form-field floatPlaceholder = "never" color = "primary">
            <input matInput #filter placeholder = "Filter">
        </mat-form-field>
    </div>

    <mat-table #table [dataSource] = "dataSource" matSort class = "mat-cell">
        <ng-container matColumnDef = "sno">
            <mat-header-cell *matHeaderCellDef>S.No.</mat-header-cell>
            <mat-cell *matCellDef = "let timesReport; let i = index;">{{i+1}}</mat-cell>
        </ng-container>

        <ng-container matColumnDef = "timesCode">
            <mat-header-cell *matHeaderCellDef>Times Code</mat-header-cell>
            <mat-cell *matCellDef = "let timesReport">{{timesReport.timesCode}}</mat-cell>
        </ng-container>

        <ng-container matColumnDef = "projectName">
            <mat-header-cell *matHeaderCellDef>Project</mat-header-cell>
            <mat-cell *matCellDef = "let timesReport">{{timesReport.projectName}}</mat-cell>
        </ng-container>

        <ng-container matColumnDef = "team">
            <mat-header-cell *matHeaderCellDef mat-sort-header>Team</mat-header-cell>
            <mat-cell *matCellDef = "let timesReport">{{getTeamDesc(timesReport)}}</mat-cell>
        </ng-container>

        <ng-container matColumnDef = "department">
            <mat-header-cell *matHeaderCellDef mat-sort-header>Department</mat-header-cell>
            <mat-cell *matCellDef = "let timesReport">{{getDeptDesc(timesReport)}}</mat-cell>
        </ng-container>

        <ng-container matColumnDef = "allocatedWorkload">
            <mat-header-cell *matHeaderCellDef mat-sort-header>Allocated PD</mat-header-cell>
            <mat-cell *matCellDef = "let timesReport">{{timesReport.allocatedWorkload}}</mat-cell>
        </ng-container>

        <ng-container matColumnDef = "activity">
            <mat-header-cell *matHeaderCellDef>Activity</mat-header-cell>
            <mat-cell *matCellDef = "let timesReport">{{timesReport.activity}}</mat-cell>
        </ng-container>

        <ng-container matColumnDef = "actualWorkload">
            <mat-header-cell *matHeaderCellDef mat-sort-header>Actual Received PD</mat-header-cell>
            <mat-cell *matCellDef = "let timesReport">{{timesReport.actualWorkload}}</mat-cell>
        </ng-container>

        <ng-container matColumnDef = "createdBy">
            <mat-header-cell *matHeaderCellDef mat-sort-header>Created By</mat-header-cell>
            <mat-cell *matCellDef = "let timesReport">{{timesReport.createdBy}}</mat-cell>
        </ng-container>

        <ng-container matColumnDef = "creationDate">
            <mat-header-cell *matHeaderCellDef mat-sort-header>Creation Date</mat-header-cell>
            <mat-cell *matCellDef = "let timesReport">{{timesReport.creationDate}}</mat-cell>
        </ng-container>

        <ng-container matColumnDef = "approvedBy">
            <mat-header-cell *matHeaderCellDef mat-sort-header>Approved By</mat-header-cell>
            <mat-cell *matCellDef = "let timesReport">{{timesReport.approvedBy}}</mat-cell>
        </ng-container>

        <ng-container matColumnDef = "approvalDate">
            <mat-header-cell *matHeaderCellDef mat-sort-header>Approval Date</mat-header-cell>
            <mat-cell *matCellDef = "let timesReport">{{timesReport.approvalDate}}</mat-cell>
        </ng-container>

        <ng-container matColumnDef = "claimed">
            <mat-header-cell *matHeaderCellDef mat-sort-header>Claimed PD</mat-header-cell>
            <mat-cell *matCellDef = "let timesReport">{{timesReport.claimed}}</mat-cell>
        </ng-container>

        <ng-container matColumnDef = "unclaimed">
            <mat-header-cell *matHeaderCellDef mat-sort-header>Unclaimed PD</mat-header-cell>
            <mat-cell *matCellDef = "let timesReport">{{timesReport.unclaimed}}</mat-cell>
        </ng-container>

        <ng-container matColumnDef = "gapActualAllocated">
            <mat-header-cell *matHeaderCellDef mat-sort-header>Gap (Actual vs Allocated)</mat-header-cell>
            <mat-cell *matCellDef = "let timesReport">{{timesReport.gapActualAllocated}}</mat-cell>
        </ng-container>

        <ng-container matColumnDef = "lossPD">
            <mat-header-cell *matHeaderCellDef mat-sort-header>Loss PD</mat-header-cell>
            <mat-cell *matCellDef = "let timesReport">{{timesReport.lossPD}}</mat-cell>
        </ng-container>

        <mat-header-row *matHeaderRowDef = "dispProjectTimesReportColumns"></mat-header-row>
        <mat-row *matRowDef = "let row; columns: dispProjectTimesReportColumns;"></mat-row>
    </mat-table>

    <div class = "no-results" [style.display] = "dataSource.renderedData.length == 0 ? '' : 'none'">
        No results found
    </div>

    <mat-paginator #paginator [length] = "dataSource.filteredData.length" [pageIndex] = "0" [pageSize] = "100"
        [pageSizeOptions] = "[25, 50, 100, 200]">
    </mat-paginator>

</div>

После ответа Дипу фон выглядит следующим образом: