Bootstrap table width changes on row expansion? Angular 10

Question

I have a table with expandible rows on click as following:

<table class="table table-striped" >
    <thead>
    <tr>
      <th scope="col">a</th>
      <th scope="col">b</th>
    </tr>
    </thead>
    <tbody>
    <ng-container *ngFor="let x of w">
      <tr (click)="expand(x)">
        <td>a</td>
        <td>b</td>
      </tr>
      <div *ngIf="x.expand" style="padding-top: 30px; padding-bottom: 30px;">
        <tr>
          <th scope="col">a</th>
          <th scope="col">b</th>
          <th scope="col">c</th>
          <th scope="col">d</th>
          <th scope="col">e</th>
        </tr>
        <tr *ngFor="let y of x.z">
          <td>a</td>
          <td>b</td>
          <td>c</td>
          <td>d</td>
          <td>e</td>
        </tr>
      </div>
    </ng-container>
    </tbody>
  </table>

• Table before click:

• Table on click:

How can I make the inner table to fully cover space, and the original one not be modified (columns)?

Edited with red the modified areas:

Answer 1

Solved adding a new table to a new row with a 2 colspan column:

<tr *ngIf="x.expand">
  <td colspan="2" style="padding: 0px; padding-top: 20px; padding-bottom: 20px;">
    <table class="table" style="width: 100%;">
      <thead>
        <tr>
          <th scope="col">a</th>
          <th scope="col">b</th>
          <th scope="col">c</th>
          <th scope="col">d</th>
          <th scope="col">e</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let y of x.z">
         <td>a</td>
         <td>b</td>
         <td>c</td>
         <td>d</td>
         <td>e</td>
       </tr>
      </tbody>
    </table>
  </td>
</tr>