Angular Data Table展开的行仅占用父级的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

有可能，请参见this stackblitz。

我认为您的问题不在于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>