Плавающая горизонтальная полоса прокрутки с мат-таблицей в Angular

Question

Можно ли добавить плавающую горизонтальную полосу прокрутки к mat-table в Angular 7 без JQuery или каких-либо других дополнительных плагинов?

У меня есть mat-table, который показывает 6 столбцов, но также может динамически добавлять 100+ столбцы нажатием кнопки.
Но тогда макет ломается.

HTML-часть:

<button (click)="showLess()" mat-stroked-button class="show-button">Show Less</button>
<button (click)="showMore()" mat-stroked-button class="show-button">Show More</button>

<div class="component data component-card">
<mat-card *ngIf="dataSource?.filteredData" class="mat-card">
    <mat-paginator [length]="length" [pageSize]="100" [pageSizeOptions]="[100, 250, 500, 1000, 2000]" showFirstLastButtons> </mat-paginator>
    <mat-table [dataSource]="dataSource" matSort class="table">
        <ng-container class="container" *ngFor="let displayedColumn of displayedColumns" matColumnDef="{{ displayedColumn }}">
            <mat-header-cell class="header-cell" *matHeaderCellDef >
                <span mat-sort-header class="sort-header">{{ displayedColumn | uppercase }}</span>
                <input class="table-input" matInput (keyup)="applyFilter($event.target.value)" (focus)="setupFilter(displayedColumn)" placeholder="Filter"/>
            </mat-header-cell>
            <mat-cell class="cell" *matCellDef="let item">{{ item[displayedColumn] }}</mat-cell>
        </ng-container>
        <mat-header-row class="header-row" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
        <mat-row class="row" *matRowDef="let row; columns: displayedColumns;"></mat-row>
    </mat-table>
</mat-card>

CSS-часть:

.data {
    display: block;
    width: 95vw;
    overflow: auto;

    .table {
        width: 100vw;
        max-width: 100%;
        overflow: auto;
        margin-bottom: 10px;
        display: table;
        border-collapse: collapse;
        margin: 0px;
        background-color: rgb(238, 238, 238);
}
    .row,
    .header-row {
        display: table-row;
        min-height: 36px !important;
}
    .cell,
    .header-cell {
        word-wrap: initial;
        display: table-cell;
        padding: 0px 5px;
        line-break: unset;
        width: fit-content;
        white-space: nowrap;
        overflow: hidden;
        vertical-align: middle;
        text-align: center;
}
    .header-row,
    .header-cell {
        margin: 0 auto;
        min-height: 100px !important;
        text-align: center;
        vertical-align: middle;
        align-self: center;
}
    .sort-header {
        display: flex;
        align-content: center;
        text-align: center;
        justify-content: center;
        font-size: 12pt;
}
    .header-cell {
        font-weight: bold;
    }
}

.mat-card {
    min-width: max-content;
    max-width: max-content;
}

Если оба переполнения активны, тогда мне нужно прокрутить вниз, чтобы иметь возможность прокручивать по горизонтали, но раскладка остается такой, как должна.Прокручивается только таблица матов и div вокруг нее, а элементы над таблицей матов (поля поиска и т. Д.) Остаются там, где и должны.Все остается в середине экрана.

Если я отключу переполнение от div в «.data», то появится обычная полоса прокрутки браузера, и мне больше не придется прокручивать страницу вниз.Но таблица матов расширяет экран вправо при прокрутке, а поля поиска выше останутся слева при горизонтальной прокрутке, что для меня нарушает раскладку.

Мне нужно было бы сочетание обеих полос прокрутки, которыебудет плавающей полосой прокрутки в моих глазах.Я бы только прокрутил таблицу матов, но остальное осталось на месте.

Есть ли способ сделать это изначально с помощью CSS или Angular?

Демонстрация: https://stackblitz.com/edit/angular-elm867?file=src%2Fapp%2Fapp.component.scss

Если вы нажмете «Показать больше», просто посмотрите, как кнопки ведут себя при прокрутке после комментирования «переполнения: автоматически» в «.data».

Вот изображение того, какТаблица прокрутки должна заменить обычную полосу прокрутки:

Answer 1

в вашем существующем стеке , нужно одно изменение, чтобы выполнить это ...

В SCSS определите класс как: mat-paginator{width:97vw;}

Answer 2

Добавьте следующее к styles.css, чтобы удалить горизонтальную полосу прокрутки

html,
body {
  margin: 0 !important;
  padding: 0 !important;
}

Также добавьте, чтобы добавить горизонтальную прокрутку в .table, если переполнены дополнительные столбцы.

.mat-card {
    min-width: 100% !important;
    max-width: 100% !important;
}
.table {
  display: block !important;
}

Демонстрация Stackblitz с откорректированными данными таблицы после динамического добавления столбца

Обновление 1:

Исправлено max-height для контейнера div .data для фиксации горизонтальной полосы прокрутки в контейнере.

.data {
  max-height: 500px;
  overflow: auto;
}

Демонстрация с фиксированной максимальной высотой на внешнем контейнере для фиксации свитков