如何让嵌套Angular Material表格与父表格列对齐？

问题描述 #

开发非display: flex版本的Angular Material嵌套表格时，内层表格列无法与父表格表头对齐，目标效果：

• 父表格表头同时适配父表行、嵌套子表行
• 子表Street列对齐父表name列
• 子表number列对齐父表email列
  

问题原因 #

默认嵌套表格放在跨全列的详情单元格中，子表为独立表格，有独立的列宽计算规则，和父表列宽不互通；加上外层详情容器使用display: flex布局、详情单元格默认自带内边距，最终导致列错位。

修复方案 #

1. 调整CSS样式 #

替换原有样式，核心是开启固定表格布局、移除破坏宽度流的属性、清除详情单元格内边距：

table {
  width: 100%;
  /* 关键：固定表格布局，同列数同顺序的表格列宽自动一致 */
  table-layout: fixed;
}

tr.example-detail-row {
  height: 0;
}

.example-element-row td {
  border-bottom-width: 0;
}

.example-element-detail {
  overflow: hidden;
  /* 移除原有display: flex，避免破坏表格宽度计算 */
}

.inner-table {
  width: 100%;
  /* 移除子表多余阴影避免视觉错位，可按需调整 */
  box-shadow: none !important;
}

/* 关键：移除展开行单元格的默认内边距，避免子表整体缩进 */
td.mat-cell[colspan] {
  padding: 0 !important;
}

2. 调整HTML模板 #

核心原则：子表的列数量、列顺序必须和父表完全对应，不需要的列位置留空占位即可。当前场景父表为name、email两列，子表两列直接按顺序对应：

<table mat-table #outerSort="matSort" [dataSource]="dataSource" multiTemplateDataRows class="mat-elevation-z8" matSort>
    <ng-container matColumnDef="{{column}}" *ngFor="let column of columnsToDisplay">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{column}} </th>
        <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
    </ng-container>

    <!-- 展开详情列：跨所有父表列 -->
    <ng-container matColumnDef="expandedDetail">
        <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplay.length">
            <div class="example-element-detail" *ngIf="element.addresses?.data.length" [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
                <div class="inner-table" *ngIf="expandedElement">
                  <table mat-table #innerSort="matSort" [dataSource]="element.addresses" matSort>
                    <!-- 第一列对应父表name列，渲染street内容 -->
                    <ng-container matColumnDef="street">
                      <td mat-cell *matCellDef="let addr"> {{addr.street}} </td>
                    </ng-container>
                    <!-- 第二列对应父表email列，渲染number内容 -->
                    <ng-container matColumnDef="number">
                      <td mat-cell *matCellDef="let addr"> {{addr.number}} </td>
                    </ng-container>
                    <!-- 子表行渲染顺序和父表列顺序完全一致 -->
                    <tr mat-row *matRowDef="let row; columns: ['street', 'number'];"></tr>
                  </table>
                </div>
            </div>
        </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
    <tr mat-row 
        *matRowDef="let element; columns: columnsToDisplay;" 
        [class.example-element-row]="element.addresses?.data.length"
        [class.example-expanded-row]="expandedElement === element" 
        (click)="toggleRow(element)">
    </tr>
    <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
</table>

如果父表存在更多列（比如存在前置id列），只需要在子表最前面新增对应数量的空列，渲染空内容占位，保证列顺序和父表完全一致即可。如果父表有手动指定列宽，子表对应列添加相同宽度样式，对齐效果会更稳定。

效果说明 #

修改后不需要手动写死任何列宽值，父表和子表列宽会自动同步：

• 子表Street列自动匹配父表name列宽度，完全对齐
• 子表number列自动匹配父表email列宽度，完全对齐
• 后续如果父表列宽变化（如增加列拖拽、动态调整列宽功能），子表列会自动跟随适配

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