Высота и данные ячейки источника данных

Question

У меня проблема с мат-ячейкой источника данных и данными внутри нее.

• Шаг 1: Я отправляю запрос http для получения первых данных.
• Шаг 2: Я отправляю еще один http-запрос с некоторыми параметрами из данных шага 1.

Проблема в данных, которые я получил на шаге 2. Данные выходят за рамки матрицы, и это не очень красиво. Экран моей проблемы:

Как лучше всего отобразить все элементы в столбце 3?

Большое спасибо!

РЕДАКТИРОВАТЬ: я добавляю полосу прокрутки внутри моей ячейки с этим кодом CSS

.mat-row {
    min-height: 72px !important;

    .mat-cell:nth-child(3) {
        height: 68px !important;
    }

    .mat-cell:nth-child(3):hover {
        overflow-y: scroll;
    }
}

Answer 1

Вы не опубликовали свой код, который не помогает, но если вы хотите, чтобы таблица расширялась, а пользователь прокручивал по горизонтали, сделайте это для каждого или нескольких столбцов:

 <td style="width: 10em" mat-cell *matCellDef="let row">

Конечно, вы можете использовать таблицу стилей и класс CSS для достижения большего.

Стол с матом Stackblitz

<section class='tableSection'>

    <mat-table class="matTable" [dataSource]="dataSource">

В таблице стилей:

.tableSection {
    display: block;
    width: 100%;
    overflow-x: auto;
}

.matTable {
    width: 40em;
    overflow: scroll;
}

.mat-header-cell{
  text-align: left;
  background-color: lightgray;
}

.mat-cell {
  text-align: left;
}