Can I insert a child table under cdk-row?

I am using cdk-table in Angular and I want to add a child table under cdk-row to display. So, I implemented it as follows. But the child table is not displayed. I also can't find the child table element in DevTools of Chrome. Someone can help me to solve this issue?

<table cdk-table [dataSource]="ELEMENT_DATA">
<!-- Position Column -->
<ng-container cdkColumnDef="position">
<th cdk-header-cell *cdkHeaderCellDef> No. </th>
<td cdk-cell *cdkCellDef="let element"> {{element.position}} </td>
</ng-container>

<!-- Name Column -->
<ng-container cdkColumnDef="name">
<th cdk-header-cell *cdkHeaderCellDef> Name </th>
<td cdk-cell *cdkCellDef="let element"> {{element.name}} </td>
</ng-container>

<!-- Weight Column -->
<ng-container cdkColumnDef="weight">
<th cdk-header-cell *cdkHeaderCellDef> Weight </th>
<td cdk-cell *cdkCellDef="let element"> {{element.weight}} </td>
</ng-container>

<!-- Symbol Column -->
<ng-container cdkColumnDef="symbol">
<th cdk-header-cell *cdkHeaderCellDef> Symbol </th>
<td cdk-cell *cdkCellDef="let element"> {{element.symbol}} </td>
</ng-container>

<tr cdk-header-row *cdkHeaderRowDef="displayedColumns"></tr>
<tr cdk-row *cdkRowDef="let row; columns: displayedColumns;">
<td colspan="4">
<!-- Nested table -->
<table style="width: 100%; margin-top: 10px;">
<tr>
<th>Detail</th>
<th>Value</th>
</tr>
<tr *ngFor="let detail of row.details">
<td>{{ detail.name }}</td>
<td>{{ detail.value }}</td>
</tr>
</table>
</td>
</tr>
</table>

Continue reading...