如何将嵌套的角材料表与其父列对齐？

Question

我使用的是Angular Material的表（不是显示：Flex版本），并且正在使用嵌套表，但是我希望嵌套表的列与父表的标题对齐。

这样，父列标签将应用于自身和嵌套表。

这就是现在的样子。但是我希望嵌套表中的两个列也对齐，以便街道与“名称”一致，并且数字与“电子邮件”一致。

这是桌子的stackblitz 。

css

table {
  width: 100%;
}

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%;
}

html

<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>

    <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
    <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 mat-elevation-z8" *ngIf="expandedElement">
          <table #innerTables mat-table #innerSort="matSort" [dataSource]="element.addresses" matSort>
            <ng-container matColumnDef="{{innerColumn}}" *ngFor="let innerColumn of innerDisplayedColumns">
              <td mat-cell *matCellDef="let element"> {{element[innerColumn]}} </td>
            </ng-container>
            <tr mat-row *matRowDef="let row; columns: innerDisplayedColumns;"></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>

这个stackblitz最初来自此链接，我只是对其进行了一些修改。

Answer 1

最好使用Angular材料表Flex版本，但是添加一些肮脏的代码可以解决：

我在CSS代码下方添加到CSS文件：

.mat-column-name {
  width: 200px;
}

.mat-column-street {
  padding-left: 0 !important;
  width: 200px;
}

您也可以看到 stackblitz link。

通过这种方式，名称列＆amp; 街道列固定在200px或您想要多少。