md-table - How to update the column width

Question

I have started using the md-table for my project, and I want fixed column width. Currently all columns width are divided into equal size.

Where can I get the documen

Answer 1

I just used:

th:nth-child(4) {
    width: 10%;
}

Replace 4 with the position of the header that you need to adjust the width for.The examples in the documentation used:

td, th {
  width: 25%;
}

So I just modified it to get what I wanted.

Answer 2

The Angular material documentation uses

.mat-column-userId {
    max-width: 40px;
}

for its table component to change the column width. Again, userId would be the cells name.

Answer 3

If you are using angular/flex-layout in your project, you can set column with by adding fxFlex directive to mat-header-cell and mat-cell:

 <ng-container matColumnDef="name" >
      <mat-header-cell fxFlex="100px" *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
      <mat-cell  fxFlex="100px" *matCellDef="let row;" (click)="rowClick(row)">{{row.Name}}</mat-cell>
 </ng-container>

Otherwise, you can add custom CSS to achieve the same result:

.mat-column-name{
    flex: 0 0 100px;
}

Answer 4

You can also add the styling directly in the markup if you desire so:

<ng-container matColumnDef="Edit">
     <th mat-header-cell *matHeaderCellDef > Edit </th>
     <td mat-cell *matCellDef="let element" (click)="openModal()" style="width: 50px;"> <i class="fa fa-pencil" aria-hidden="true"></i> </td>
</ng-container>

Answer 5

Let's take an example. If your table has columns as follows:

<!-- ID Column -->
  <ng-container matColumnDef="id" >
    <th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
    <td mat-cell *matCellDef="let row"> {{row.sid}} </td>
  </ng-container>

 <!-- Name Column -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
    <td mat-cell *matCellDef="let row"> {{row.name}} </td>
  </ng-container>

As this contain two columns. then we can set the width of columns using

.mat-column-<matColumnDef-value>{
    width: <witdh-size>% !important;
}

for this example, we take

  .mat-column-id{
    width: 20% !important;      
  }
  .mat-column-name{
    width: 80% !important;
  }

Answer 6

.mat-column-skills {
    max-width: 40px;
}