Мат-карта в мат-столе не занимает всю ширину с переполнением: x

Question

Я вставил мат-карту в мат-стол и установил ширину шириной: 100%. Но когда я прокручиваю с переполнением: x слева направо, не вся оболочка заполняется мат-картой. У вас есть идеи, что мне нужно оптимизировать в CSS?

Мой код:

// HTML
<div class="app-table-wrapper">
  <table mat-table [dataSource]="dataSource" id="app-table">...</table>
    <mat-card class="change-width"></mat-card>
</div>

// CSS
.app-table-wrapper {
  position: relative;
  background-color: #fbf9f9;
  min-width: 200px;
  overflow: auto;
  padding: 0;
  height: 300px;
}

.change-width {
  width: 100%;
}

Моя работа: https://stackblitz.com/edit/angular-sticky-table-a818pn?file=src%2Fapp%2Ftable%2Ftable.component.html

Answer 1

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

Для этого вы можете использовать переменную для привязки ее к * ngIf в бирка-мат-карта.