Bootstrap таблица: свернуть таблицу внутри строки таблицы

Question

Я хочу создать свернутую таблицу внутри строки таблицы с атрибутом data-toggle = "table" для главной таблицы, потому что я хочу, чтобы она была сортируемой. Но он создает тд, которого нет в моем HTML коде. Потому что я думаю, что он предназначен как для основной, так и для таблиц строк? Как я могу это исправить?

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>