Bootstrap 4 引导表：在表行内折叠表

我希望在主表的表行中创建一个具有data toggle=“table”属性的可折叠表，因为我希望它是可排序的。但是它创建了我的HTML代码中没有的td。因为我认为它同时针对主表和行表内部？我怎样才能解决这个问题

JSFiddle：

例子
例子
例子
例子
例子
例子
例子
例子
#757894
例子
例子
例子
06-07-2018
例子
15秒
拒绝
例子
例子
例子
例子
例子
例子
例子
例子
例子
某个日期
某个日期

您能再描述一下吗。您的问题还没有解决。您可以在JSFIDLE中清楚地看到问题。有一些随机生成的单元不应该存在。如果删除主表的属性，一切看起来都很好。但是我想有一些属性，比如sort类。但我不想把折叠的桌子分类。只是主要的一个。只有一个建议，把手风琴琴琴放在桌子外面。它不起作用，因为我不需要它放在桌子外面。你能再描述一下吗。您的问题还没有解决。您可以在JSFIDLE中清楚地看到问题。有一些随机生成的单元不应该存在。如果删除主表的属性，一切看起来都很好。但是我想有一些属性，比如sort类。但我不想把折叠的桌子分类。只是主要的一个。只有一个建议，把手风琴沙发放在桌子外面。它不起作用，因为我不需要它放在桌子外面。。

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