Угловая таблица данных расширяет строку, занимая пространство только 1 столбца родителя

Question

Я создал таблицу расширяемых угловых данных, но расширенное сырье всегда занимает место только в 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

Возможно, см. это стекаблиц.

Я не думаю, что ваша проблема заключается в вашем CSS, скорее всего, вы не устанавливаете colspan вашего контейнера таблицы более чем на один столбец. Можете ли вы показать код шаблона вашей расширенной строки сведений, где находится вложенная таблица?

Из документации Angular Material проверьте код таблицы с расширяемыми строками.

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