Solution :

If you have a mat-table and you want to set the width of one or many column , you can use the matColumnDef in CSS to set the width , example :


  <ng-container matColumnDef="login">
    <th mat-header-cell *matHeaderCellDef> Full Name </th>
    <td mat-cell *matCellDef="let element"> {{element.login}}</td>
  </ng-container>

in the CSS file of the component we will use the following CSS code :

table{
 width: 100%; // you can set the general width of the table in pc  , example 1500px
}

.mat-column-login{
  word-wrap: break-word !important;
  white-space: unset !important;
  flex: 0 0 28% !important;
  width: 28% !important; // you can set the width of column login as you want 
  overflow-wrap: break-word;
  word-wrap: break-word;

  word-break: break-word;

  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

Tagged:

Laisser un commentaire