Bootstrap中的Accordion表行

Question

我正在尝试使用Bootstrap中的accordion组件创建一个可折叠表。我有点工作，但桌子排不会留下来。它只是弹出并在点击后直接弹出。我确定我已经完成或忘记了一些愚蠢的事情，但我已经尝试过所有事情。

这是我的代码：

<table class="table table-hover" style="border-collapse:collapse;">
    <thead>
      <tr>
          <th scope="col">#</th>
          <th scope="col">Medewerker</th>
          <th scope="col">Datum</th>
          <th scope="col">Omschrijving</th>
          <th scope="col">Soort</th>
          <th scope="col">Bedrag ex. BTW</th>
          <th scope="col">Bedrag BTW</th>
          <th scope="col">Bedrag incl. BTW</th>
      </tr>
    </thead>

    <tbody>
          <tr data-toggle="collapse" data-target="#demo1" class="accordion-toggle">
            <th scope="row">1</th>
            <td>Thomas Brandhorst</td>
            <td>10-11-2017</td>
            <td>Groningen - Amersfoort</td>
            <td>Reiskosten</td>
            <td>&euro; 10,00</td>
            <td>&euro; 2,10</td>
            <td>&euro; 12,10</td>
          </tr>

          <tr>
            <td colspan="100%" class="hiddenRow">
                <div class="accordion-body collapse" id="demo1">Demo1</div>
            </td>
          </tr><tr data-toggle="collapse" data-target="#demo2" class="accordion-toggle">
        <th scope="row">2</th>
        <td>Daymian de Jong</td>
        <td>10-11-2017</td>
        <td>Amersfoort - Groningen</td>
        <td>Reiskosten</td>
        <td>&euro; 10,00</td>
        <td>&euro; 2,10</td>
        <td>&euro; 12,10</td>
      </tr>

      <tr>
        <td colspan="100%" class="hiddenRow">
            <div class="accordion-body collapse" id="demo2">Demo2</div>
        </td>
      </tr>

      <tr>
        <th scope="row">3</th>
        <td>Sander ter Horst</td>
        <td>15-11-2017</td>
        <td>Lunch met collega</td>
        <td>Maaltijdkosten</td>
        <td>&euro; 20,00</td>
        <td>&euro; 4,20</td>
        <td>&euro; 24,20</td>
      </tr>

      <tr>
        <th scope="row">4</th>
        <td>Daymian de Jong</td>
        <td>16-11-2017</td>
        <td>Parkeren Amsterdam</td>
        <td>Parkeerkosten</td>
        <td>&euro; 5,00</td>
        <td>&euro; 1,05</td>
        <td>&euro; 6,05</td>
      </tr>

    </div>
    </tbody>
  </table>