bootstrap-4 - 引导表：在表格行内折叠表格

Question

我想在主表的带有 data-toggle="table" 属性的表行中创建一个可折叠表，因为我希望它是可排序的。但它创建了不在我的 HTML 代码中的 td。因为我认为它既针对主表又针对行表内部？我怎样才能解决这个问题？

JSFiddle：https ://jsfiddle.net/3we09xy5/1/

 <table
        class="table table-dark table-bordered mt-5"
        id="table"
        data-toggle="table"
        data-target="table"
        data-sortable="true"
      >
        <thead>
          <tr>
            <th></th>
            <th data-sortable="true">Example</th>
            <th data-sortable="true">Example</th>
            <th data-sortable="true">Example</th>
            <th data-sortable="true">Example</th>
            <th data-sortable="true">Example</th>
            <th data-sortable="true">Example</th>
            <th data-sortable="true">Example</th>
            <th data-sortable="true">Example</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <button
                class="btn btn-light btn-xs"
                data-toggle="collapse"
                data-target="#demo1"
                class="accordion-toggle"
              >
                <i class="fas fa-chevron-down"></i>
              </button>
            </td>
            <td>#757894</td>
            <td>Example</td>
            <td>Example</td>
            <td>Example</td>
            <td>06-07-2018</td>
            <td>Example</td>
            <td>15s</td>
            <td>
              <span class="badge badge-danger">Declined</span>
            </td>
          </tr>

          <td colspan="12" class="hiddenRow">
            <div class="accordian-body collapse" id="demo1">
              <table class="table table-striped table-light">
                <thead>
                  <tr>
                    <th>Example</th>
                    <th>Example</th>
                    <th>Example</th>
                    <th>Example</th>
                    <th>Example</th>
                    <th>Example</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>Example</td>
                    <td>Example</td>
                    <td>Example</td>
                    <td>some date</td>
                    <td>some date</td>
                    <td>
                      <a href="#" class="btn btn-default btn-sm">
                        <i class="glyphicon glyphicon-cog"></i
                      ></a>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </td>
        </tbody>
      </table>

标签： bootstrap-4toggletablesortercollapsebootstrap-table