mat-table首列占用全部剩余宽度问题求解决方案

现象 #

所有列应用相同CSS的情况下，mat-table的首列仍会占用全部剩余宽度，首列（First Name）占据了所有列分配后的剩余空间。

需求 #

实现所有列宽度均等，或让最后一列而非首列占用剩余宽度。

表格定义代码 #

<mat-table [dataSource]="gridDatasource" class="body-text" matSort #empTbSort="matSort">
    <ng-container matColumnDef="firstName">
      <th mat-header-cell *matHeaderCellDef class="column-5 fw-semibold" mat-sort-header> First Name </th>
      <td mat-cell *matCellDef="let item">
        {{item?.firstName}}
      </td>
    </ng-container>

    <ng-container matColumnDef="lastName">
      <th mat-header-cell *matHeaderCellDef class="column-5 fw-semibold" mat-sort-header> Last Name </th>
      <td mat-cell *matCellDef="let item">{{item?.lastName}}</td>
    </ng-container>

    <ng-container matColumnDef="email">
      <th mat-header-cell *matHeaderCellDef class="column-5 fw-semibold" mat-sort-header> Email </th>
      <td mat-cell *matCellDef="let item">
        {{item?.email}}
      </td>
    </ng-container>
    <ng-container matColumnDef="fundHouseName">
      <th mat-header-cell *matHeaderCellDef class="column-5 fw-semibold" mat-sort-header> Fund House </th>
      <td mat-cell *matCellDef="let item">
        {{item?.fundHouseShortName}} - {{item?.fundHouseFullName}}
      </td>
    </ng-container>
    <ng-container matColumnDef="fundName">
      <th mat-header-cell *matHeaderCellDef class="column-5 fw-semibold" mat-sort-header> Fund </th>
      <td mat-cell *matCellDef="let item">
        {{item?.fundShortName}} - {{item?.fundFullName}}
      </td>
    </ng-container>
    <ng-container matColumnDef="emailConfirmed">
      <th mat-header-cell *matHeaderCellDef class="column-5 fw-semibold" mat-sort-header> Email Confirmed </th>
      <td mat-cell *matCellDef="let item">
        {{item.emailConfirmed?'Yes':'No'}}
      </td>
    </ng-container>

    <ng-container matColumnDef="isActive">
      <th mat-header-cell *matHeaderCellDef class="column-5 fw-semibold" mat-sort-header> Status </th>
      <td mat-cell *matCellDef="let item">
        {{item.isActive?'Active':'In-Active'}}
      </td>
    </ng-container>
    <ng-container matColumnDef="folioNo">
      <th mat-header-cell *matHeaderCellDef class="column-5 fw-semibold" mat-sort-header> Folio No.</th>
      <td mat-cell *matCellDef="let item">{{item.folioNo}}</td>
    </ng-container>
    <ng-container matColumnDef="actions" stickyEnd>
      <th mat-header-cell [hidden]="!featurePermissionService.canEditInvestor" *matHeaderCellDef
        class="column-5  fw-semibold"> </th>
      <td mat-cell [hidden]="!featurePermissionService.canEditInvestor" *matCellDef="let item">
        <button mat-icon-button matTooltip="Click to Edit" class="iconbutton" color="primary">
          <mat-icon aria-label="Edit" (click)="openEditDialog(item)">edit</mat-icon>
        </button>
      </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="gridColumns">
    </tr>
    <tr mat-row *matRowDef="let row; columns: gridColumns;">
    </tr>
    <tr class="mat-row no-data-row" *matNoDataRow>
      <td *ngIf="loading" class="mat-cell-load" [attr.colspan]="gridColumns.length">
        <div class="spinner">
          <mat-spinner></mat-spinner>
        </div>
      </td>
      <td *ngIf="!loading" style="text-align: center;" class="mat-cell" [attr.colspan]="gridColumns.length">
        No data matching the filter.
      </td>
    </tr>
 </mat-table>
<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page of users"></mat-paginator>  

当前使用的CSS代码 #

.mat-table {
  overflow-x: auto;
}

.mat-cell,
.mat-header-cell {
  word-wrap: initial;
  display: table-cell;
  padding: 0px 10px;
  line-break: unset;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  vertical-align: middle;
}

.mat-row,
.mat-header-row {
  display: table-row;
}

方法一：实现所有列宽度均等 #

当前CSS中给.mat-cell和.mat-header-cell设置width:100%会导致浏览器默认让首列填充剩余空间，修改方式如下：

1. 移除原有CSS中.mat-cell, .mat-header-cell的width:100%设置
2. 给表格添加固定布局，并让所有列均分宽度：

.mat-table {
  overflow-x: auto;
  table-layout: fixed;
  width: 100%;
}

.mat-cell,
.mat-header-cell {
  word-wrap: initial;
  display: table-cell;
  padding: 0px 10px;
  line-break: unset;
  width: calc(100% / 9); /* 9为当前列数，需根据实际gridColumns长度调整 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* 可选，内容过长时显示省略号 */
  vertical-align: middle;
}

.mat-row,
.mat-header-row {
  display: table-row;
}

如果列数动态变化，可在组件中计算宽度后通过[style.width]绑定到表头和单元格上。

方法二：让最后一列占用剩余宽度 #

若希望其他列固定宽度，最后一列填充剩余空间，可调整CSS如下：

.mat-table {
  overflow-x: auto;
  width: 100%;
}

/* 给非最后一列设置固定宽度 */
.mat-cell:not(:last-child),
.mat-header-cell:not(:last-child) {
  word-wrap: initial;
  display: table-cell;
  padding: 0px 10px;
  line-break: unset;
  width: 120px; /* 根据需求调整固定宽度值 */
  white-space: nowrap;
  overflow: hidden;
  vertical-align: middle;
}

/* 最后一列自动填充剩余宽度 */
.mat-cell:last-child,
.mat-header-cell:last-child {
  word-wrap: initial;
  display: table-cell;
  padding: 0px 10px;
  line-break: unset;
  white-space: nowrap;
  overflow: hidden;
  vertical-align: middle;
}

.mat-row,
.mat-header-row {
  display: table-row;
}

注意：actions列设置了stickyEnd，需确保粘性定位样式不影响其宽度逻辑。

额外提示 #

• 检查column-5类是否存在额外宽度设置，避免样式冲突
• 也可直接通过Angular Material的matColumnDef属性设置列宽，例如<ng-container matColumnDef="firstName" width="120px">，更符合组件原生用法

内容的提问来源于stack exchange，提问作者Pawan Nogariya