How do i specify the width of a column in angular material table?

<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 default width is too long that its scrollable to right and i want to specify the width.

I tried to use .mat-column-COLUMNNAME but it is not working. But that only works if i am using <table mat-table>.

Continue reading...