Expanded row in angular don't stay align with header

Question

I'm trying to get the rowexpansion to be aligned with the header, but for some reason this isn't happening.

My idea is that when I click on expand, the values are aligned with the menu, but I'm not able to make it stay. Is there a problem with my html structure?

<div class="ui-g-12">
        <p-table [columns]="6" [value]="list" dataKey="Id" [lazy]="true" styleClass="myClass">
            <ng-template pTemplate="header" let-columns>
                <tr>
                    <th id="Menu1" style="width: 4em !important"></th>
                    <th id="Menu2">{{ 'Menu2'  }}</th>
                    <th id="Menu3">{{ 'Menu3'  }}</th>
                    <th id="Menu4">{{ 'Menu4'  }}</th>
                    <th id="Menu5" style="width: 15% !important">
                        {{ 'Menu5' }}
                    </th>
                    <th id="Menu6">{{ 'Menu6' }}</th>
                    <th id="Menu7">{{ 'Menu7' }}</th>
                    <th id="Menu8" *ngIf="" style="width: 10% !important">{{ 'Menu8' }}</th>
                </tr>
            </ng-template>
            
            <ng-template pTemplate="body" let-rowData let-expanded="expanded" let-columns="columns">
                
                // MY BODY WORKS FINE
                
            </ng-template>
            
            <ng-template pTemplate="rowexpansion" let-rowData let-columns="columns">
                <tr *">
                    <td [attr.colspan]="6" style="background-color: blue !important">
                        <table aria-describedby="table">
                            <th id="empty - only for sonar"></th>
                            <tbody style="background-color: yellow; z-index: 50">
                                <div *ngFor="">
                                    <div *ngIf="">
                                        <tr>
                                            <td>{{ value }}</td>
                                            <td>{{ value }}</td>
                                            <td>{{ value }}</td>
                                            <td>
                                                <span
                                                    style="display: grid">
                                                    {{ value }}
                                                    
                                                </span>
                                            </td>
                                            <td>
                                                {{ value }}
                                            </td>
                                        </tr>
                                    </div>
                                </div>
                            </tbody>
                        </table>
                    </td>
                </tr>
            </ng-template>
        </p-table>
    </div>