mat-table how to align mat-header with the mat-cell width - angular-material

Question

I'm new with flex and I have quite made good with my mat-table.
Unfortunately my header is not following my cell width.
Here's a picture of my result.
As you see my header is not align with my cell.
Here's my CSS code, Like I said I'm new, so maybe I missed something.
#import "./../../styles.scss";
.mat-header-row {
width: 100%;
min-height: 20px;
padding: 0px 0px 0px 4px;
}
.mat-row {
width: 100%;
min-height: 12px;
display: inline-flex;
// min-width: 100%;
}
.mat-header-cell {
justify-content: left;
font-size: smaller;
font-weight: bold;
padding: 0px 0px 0px 4px;
}
.mat-cell {
justify-content: left;
border-top: 1px solid crimson;
font-size: smaller;
padding: 0px 0px 0px 4px;
text-align: left;
align-items: flex-start;
}
.mat-cell-points {
flex: 0 0 20px !important;
white-space: unset !important;
}
.mat-cell-concession{
flex: 0 0 200px !important;
white-space: unset !important;
justify-content: left;
border-top: 1px solid crimson;
font-size: smaller;
padding: 0px 0px 0px 4px;
text-align: left;
}
.rcorner1 {
border-radius: 25px;
background: mat-color($accent, 300);
padding: 20px;
}
.example-container {
display: flex;
flex-direction: column;
// min-width: 200px;
max-width: 380px;
}
label {
min-width: 15%;
}
.mat-row:nth-child(1n + 1) {
background-color: mat-color($accent, lighter);
}
.mat-row:not(:nth-child(2n + 1)) {
background-color: mat-color($primary, 300);
}
.example-element-row:hover {
background: mat-color($accent, 800);
}
.example-element-row:active {
background: #efefef;
}
And my HTML code:
<div class="example-container mat-elevation-z8 alternate-theme mat-app-background" color="primary">
<div class="mat-header-cell">
{{ this.getTypeInfo(this.typeList.TypeBourse) }}
</div>
<mat-table [dataSource]="bourseDetail" class="mat-elevation-z8">
<!-- https://stackoverflow.com/questions/53084892/angular-material-table-cell-formatting/53096778 -->
<!-- Position Column -->
<ng-container matColumnDef="Position">
<mat-header-cell *matHeaderCellDef matTooltip="Position"> # </mat-header-cell>
<mat-cell *matCellDef="let element">{{ element.Position }}</mat-cell>
</ng-container>
<!-- Concession Column -->
<ng-container matColumnDef="nom">
<mat-header-cell *matHeaderCellDef>Concession</mat-header-cell>
<mat-cell class="mat-cell-concession" *matCellDef="let element">
<ng-container *ngIf="element.Concession.Nom; else elseBlock">
{{ element.Concession.Nom }}
<ng-template #elseBlock>Content to render when condition is false.</ng-template>
</ng-container>
</mat-cell>
</ng-container>
<!-- Points Column -->
<ng-container matColumnDef="Points">
<mat-header-cell *matHeaderCellDef>points</mat-header-cell>
<mat-cell *matCellDef="let element">{{ element.Points }}</mat-cell>
</ng-container>
<!-- Amount Column -->
<ng-container matColumnDef="Montant">
<mat-header-cell *matHeaderCellDef>Gain</mat-header-cell>
<mat-cell *matCellDef="let element">{{ element.Montant | currency }}</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns" class="example-element-row"></mat-row>
</mat-table>
</div>
Thanks for your help

Answer 1

Here's my code that works now:
<div class="example-container mat-elevation-z8 alternate-theme mat-app-background" color="primary"
style="width: 450px;">
<div class="div-title">
{{ this.annee }} - {{ this.getTypeInfo(this.typeList.TypeBourse) }}
</div>
<mat-table [dataSource]="bourseDetail" class="mat-elevation-z8">
<!-- https://stackoverflow.com/questions/53084892/angular-material-table-cell-formatting/53096778 -->
<!-- Position Column -->
<ng-container matColumnDef="Position">
<mat-header-cell class="mat-cell" *matHeaderCellDef matTooltip="Position"> Pos </mat-header-cell>
<mat-cell class="mat-cell-column" *matCellDef="let element">{{ element.Position }}</mat-cell>
</ng-container>
<!-- Concession Column -->
<ng-container matColumnDef="nom">
<mat-header-cell class="mat-cell-concession" *matHeaderCellDef>Concession</mat-header-cell>
<mat-cell class="mat-cell-concession mat-cell-column" *matCellDef="let element">
<ng-container *ngIf="element.Concession.Nom">
{{ element.Concession.Nom }}
</ng-container>
<ng-container *ngIf="!element.Concession.Nom">
Info manquante
</ng-container>
</mat-cell>
</ng-container>
<!-- Points Column -->
<ng-container matColumnDef="Points">
<mat-header-cell class="mat-cell" *matHeaderCellDef>points</mat-header-cell>
<mat-cell class="mat-cell-column" *matCellDef="let element">{{ element.Points }}</mat-cell>
</ng-container>
<!-- Amount Column -->
<ng-container matColumnDef="Montant">
<mat-header-cell class="mat-cell" *matHeaderCellDef>Gain</mat-header-cell>
<mat-cell class="mat-cell-column" *matCellDef="let element">{{ element.Montant | currency }}</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns" class="example-element-row"></mat-row>
</mat-table>
And the CSS file:
#import "./../../styles.scss";
.mat-table {
width: 100%;
}
.mat-row {
width: 100%;
min-height: 12px;
}
.div-title {
text-align: center;
font-size: medium;
font-weight: bold;
padding: 4px;
}
.mat-header-cell {
min-height: 12px;
font-size: smaller;
font-weight: bold;
}
.mat-header-row {
width: 100%;
min-height: 10px;
padding: 0px 0px 0px 4px;
}
.mat-cell-column {
border-top: 1px solid crimson;
}
.mat-cell {
flex: 0 0 50px !important;
white-space: unset !important;
justify-content: left;
font-size: smaller;
padding: 0px 0px 0px 4px;
text-align: left;
}
.mat-cell-concession {
flex: 0 0 250px !important;
min-width: 250px !important;
white-space: unset !important;
justify-content: left;
font-size: smaller;
padding: 0px 0px 0px 4px;
text-align: left;
color: black;
}
.mat-row:nth-child(1n + 1) {
background-color: mat-color($accent, lighter);
}
.mat-row:not(:nth-child(2n + 1)) {
background-color: mat-color($primary, 300);
}
.example-element-row:hover {
background: mat-color($accent, 800);
}
.example-element-row:active {
background: #efefef;
}