mat-table - переполняет родительский div, если содержимое любого столбца очень длинное

Question

Использование таблицы компонентов углового материала и углового изгиба для отображения таблицы данных внутри делителя.

stackblitz link

Невозможно зафиксировать ширинустол внутри див.Если в каком-либо из столбцов имеются более длинные данные, таблица переполняет родительский div.

Ожидаемое поведение - показывать эллипс для столбца с более длинными данными, а ширина таблицы должна быть фиксированной (100% внутри родительского div) и не зависит от данных столбца.

Answer 1

Лучшее решение - не использовать пользовательский CSS

Just Replace Your <table></table> Tag with <mat-table></mat-table>

Надеюсь, это сработает для вас

Answer 2

это проблема scss / css.Вы можете переопределить CSS, используя этот класс, представленный ниже.добавьте этот код в ваш css / scss или style.css в своем приложении.

.mat-cell, .mat-header-cell { overflow: hidden; text-overflow: ellipsis; word-break: break-word; }

Идея состоит в том, чтобы обернуть содержимое в определенную строку независимо от его длины.Вы можете найти пример кода в stackblitz здесь