Mat-Card in Mat-Table does not take up full width with overflow: x

Question

I have inserted a mat-card in mat-table and set the width to width: 100%. But when i scroll with overflow: x from left to right not the whole wrapper is filled with the mat-card. Do you have an idea what I have to optimize in CSS?

My Code:

// 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%;
}

My Work: https://stackblitz.com/edit/angular-sticky-table-a818pn?file=src%2Fapp%2Ftable%2Ftable.component.html

Answer 1

I think there can be another way. You could just wait till the table gets loaded and then render your mat-card so that it can get the whole width as per the table's width.

For that you can use the variable for binding it with *ngIf in the mat-card tag.