Angular mat-table列头与单元格对齐不一致问题如何解决

我的mat-table列对齐效果存在异常，无法实现各列统一对齐。

已编写的CSS代码如下： #

mat-header-cell, mat-cell {
  justify-content: center;
}

table{
  width: 100%;
}
 
.cdk-column-email {
  word-wrap: break-word !important;
  white-space: unset !important;
  flex: 0 0 15% !important;
  width: 15% !important;
  overflow-wrap: break-word;
  word-wrap: break-word;

  word-break: break-word;

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

对应的HTML代码如下： #

<mat-table mat-table [dataSource]="dataSource" class="mat-elevation-z8" matSort>
  
    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef mat-sort-header><b>S.No</b></th>
      <td mat-cell *matCellDef="let item; let i = index">
         {{ (paginatorRef.pageIndex * paginatorRef.pageSize) + (i + 1) }}
      </td>
     </ng-container>

    <ng-container *ngFor="let column of columns; let colIndex = index" [cdkColumnDef]="column.columnDef" class="row-color">
 
      <mat-header-cell *cdkHeaderCellDef mat-sort-header > <b>{{ column.header }}</b></mat-header-cell>
      <mat-cell *cdkCellDef="let row"  [ngClass]="{ 'selected': row === selectedRow }">{{ column.cell(row) }}</mat-cell>
    </ng-container>

       <ng-container cdkColumnDef="update">
          <mat-header-cell *cdkHeaderCellDef> <b>Update</b> </mat-header-cell>
          <mat-cell *cdkCellDef="let element">       
                <mat-icon class="mat-18" (click)="Editdata(element)">edit</mat-icon>               
          </mat-cell>
        </ng-container>
     
        <ng-container cdkColumnDef="delete">
            <mat-header-cell *cdkHeaderCellDef> <b>Delete</b> </mat-header-cell>
            <mat-cell *cdkCellDef="let element">                
                  <mat-icon class="mat-18" (click)="openDialog(element.id)">delete</mat-icon>                  
            </mat-cell>
          </ng-container>   

    <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;" [ngClass]="{'row-color': !row.active}"></mat-row>             
  </mat-table>
  <mat-paginator #paginatorRef pageSize="15" [pageSizeOptions]="[10, 25, 50]" showFirstLastButtons></mat-paginator>

当前实际效果 #

设置justify-content: center时的效果：

为mat-header-cell和mat-cell设置justify-content: center属性后，各列对齐效果不一致。不设置该属性时的效果如下：

导致对齐异常的核心原因有两点：一是仅给email列设置了固定宽度规则，其余列的宽度由内容自动撑开，宽度不统一导致对齐错位；二是带排序功能的表头（mat-sort-header）自带右侧排序箭头占位，默认的内边距和普通单元格不统一，也会导致上下对齐错位。

替换原有CSS为以下内容即可实现统一对齐：

/* 全局table宽度 */
table{
  width: 100%;
  table-layout: fixed; /* 固定表格布局，避免内容撑开列宽 */
}

/* 统一所有单元格的对齐和盒模型 */
mat-header-cell, mat-cell, th[mat-header-cell], td[mat-cell] {
  justify-content: center;
  text-align: center;
  padding: 0 8px; /* 统一内边距 */
  box-sizing: border-box;
  overflow: hidden;
}

/* 统一带排序表头的布局，抵消排序箭头的占位偏移 */
.mat-sort-header-container {
  justify-content: center;
  padding-right: 0 !important; /* 取消默认给排序箭头预留的右padding */
}

/* 保留原有的email列换行规则 */
.cdk-column-email {
  word-wrap: break-word !important;
  white-space: unset !important;
  flex: 0 0 15% !important;
  width: 15% !important;
  overflow-wrap: break-word;
  word-break: break-word;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* 操作列固定小宽度 */
.cdk-column-update, .cdk-column-delete {
  flex: 0 0 80px !important;
  width: 80px !important;
}

/* 序号列固定小宽度 */
.cdk-column-id {
  flex: 0 0 80px !important;
  width: 80px !important;
}

如果有其他自定义列需要调整宽度，参照上述写法给对应的.cdk-column-列名设置固定宽度或占比即可。

内容的提问来源于stack exchange，提问作者A Coder