열의 콘텐츠 정렬 및 Angular로 사용자 정의 너비 추가

열에 사용자 정의 너비를 적용하려면 아래와 같이 너비가 픽셀로 제공되는 도우미 클래스를 만들 수 있습니다.

.w-75{
    width: 75px;
}

.w-100{
    width: 100px;
}

요구 사항에 따라 이러한 사용자 정의 너비 클래스를 원하는 만큼 추가할 수 있습니다.

그런 다음 생성한 테이블의 <th> 요소에 추가하기만 하면 됩니다.

<ng-container matcolumnDef="id">
  <th class="w-75" mat-header-cell *matHeaderCellDef> id </th>
  <td mat-cell *matCellDef="let element"> {{element.id}} </td>
<ng-container>

데이터 테이블의 열에서 텍스트를 정렬하는 방법

CSS 파일에서 아래와 같이 클래스를 생성합니다.

.th-center{
  text-align: center;
}
.th-left{
  text-align: left;
}
.th-right{
  text-align: right;
}

th 요소에 추가할 수 있습니다.

  <ng-container matColumnDef="id">
    <th class="w-75 th-center" mat-header-cell *matHeaderCellDef> id </th>
    <td mat-cell *matCellDef="let element"> {{element.id}} </td>
  </ng-container>

아래와 같이 구성 요소 요소를 사용하는 데이터 테이블의 경우:

<mat-table [dataSource]="dataList" class="mat-elevation-z8">

  <ng-container matColumnDef="id">
    <mat-header-cell *matHeaderCellDef [ngClass]="'w-75'"> id </mat-header-cell>
    <mat-cell *matCellDef="let element" [ngClass]="'w-75'"> {{element.id}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef> name </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="username">
    <mat-header-cell *matHeaderCellDef> username </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.username}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="email">
    <mat-header-cell *matHeaderCellDef> email </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.email}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="phone">
    <mat-header-cell *matHeaderCellDef> phone </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.phone}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="website">
    <mat-header-cell *matHeaderCellDef> website </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.website}} </mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

[ngClass] 지시문을 사용하여 열 및 셀에 클래스를 추가할 수 있지만 구성 요소가 FLEX 레이아웃을 사용하여 너비를 정의하기 때문에 너비 대신 열과 셀에 max-width를 사용해야 합니다.

그런 다음 CSS 클래스를 다음으로 업데이트할 수 있습니다.

.w-75{
  max-width: 75px;
}

.w-100{
  max-width: 100px
}