Угловой материал ширина столбца соответствует содержанию?

Question

Это моя фактическая таблица угловых материалов:

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

Попытка добавления отступов и полей с помощью:

.mat-row {
    height: auto;
}

.mat-cell {
    padding: 0px 15px 15px 0;
}

Это решение разделяет столбцы, но содержимое, например дата, все еще находится в3 различных ряда.

Любые советы о том, как решить эту проблему, будут оценены.

Answer 1

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

https://stackblitz.com/edit/angular-sae9ln?file=styles.css

table > thead > tr > th.mat-header-cell.cdk-column-position.mat-column-position {
  white-space: nowrap;
}

Попробуйте удалить эту строку в стеке и посмотрите, что происходит

Answer 2

Столбцы автоматически подстраиваются, если вы не указали фиксированную ширину, я думаю, что проблема вашего дизайна в том, что в таблице недостаточно места для расширения.