<mat-tab class="StatusTab" label="Status">
<mat-table class="table mat-elevation-z10" [dataSource]="statusDetails">
<ng-container matColumnDef="id">
<mat-header-cell *matHeaderCellDef>Staff-id</mat-header-cell>
<mat-cell *matCellDef="let staff">{{staff.staff_id}}</mat-cell>
</ng-container>
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
<mat-cell *matCellDef="let staff">{{staff.name}}</mat-cell>
</ng-container>
<ng-container style="width: 10px;" matColumnDef="status">
<mat-header-cell *matHeaderCellDef>Status</mat-header-cell>
<mat-cell *matCellDef="let staff">{{staff.status}}</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="columns"></mat-header-row>
<mat-row *matRowDef="let staff;columns:columns"></mat-row>
</mat-table>
</mat-tab>
CSS:
.table {
width: 100%;
margin:50px;
}
.mat-column-id {
width: 32px;
border-right: 1px solid black;
}
The length of the default width makes it scrollable to the right, and I need to adjust the width.
I attempted to utilize .mat-column-COLUMNNAME with no success. This method only seems to work with <table mat-table>.