角度数据表扩展行仅占用父级的 1 列空间

Question

我制作了一个 Angular 可扩展数据表，但扩展后的原始数据始终只占用其父级的 1 列空间。这或多或少是我的 CSS 代码：

    .mat-table {
    display:table;
    width:100%;

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

        > .mat-header-cell, > .mat-cell {
            display: table-cell;
            font-size: 12px;

            vertical-align: middle;
            border-bottom: 1px solid rgba(0, 0, 0, 0.12);
        }
    }
}

扩展的行包含另一个表，因此可能是问题所在，但我不知道如何解决。 这就是它现在的样子：

（扩展行为灰色并包含另一个具有 1 个元素的表格） 展开后：

我没有使用 Angular Material 文档中可扩展行的方法，我使用的是我自己的 cdk，扩展行存储在：

<ng-template #tpl let-element></ng-template>

当我使用display: flex 时，一切看起来都很好，但在这种情况下我无法使用它。所以我认为我必须更改我的 CSS，这就是问题所在。

Answer 1

有可能，见thisstackblitz。

我认为您的问题不在于您的 CSS，更有可能您没有将表格容器的 colspan 设置为多于一列。能否显示嵌套表所在的展开明细行的模板代码？

从 Angular Material documentation，检查带有可扩展行的表格的代码。

<ng-container matColumnDef="expandedDetail">
  <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplay.length">
    <!-- your table here -->
  </td>
</ng-container>