Bootstrap table 行扩展时的宽度变化？ Angular 10

Question

我有一个 table，点击后可展开行如下：

<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 点击前：

Table 点击：

怎样才能让里面的table完全覆盖space，而不修改原来的（列）？

用红色编辑修改的区域：

Answer 1

已解决将新 table 添加到具有 2 colspan 列的新行：

<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>

Bootstrap table 行扩展时的宽度变化？ Angular 10

Bootstrap table width changes on row expansion? Angular 10

accordion

angular-bootstrap

angular