как я могу свернуть все строки таблицы

Question

у меня есть строки таблицы внутри таблицы, а также другие строки вложенной таблицы внутри каждой строки, моя проблема заключается в том, что я могу свернуть и развернуть строки вложенной таблицы, но когда я пытаюсь развернуть в основной таблице только первую строку остальные расширяются по умолчанию при запуске программы, как я могу это исправить.

это мой код

tbody.collapse.in {
  display: table-row-group;
}

.tigray {
  background-color: darkcyan;
}

.zoba {
  background-color: forestgreen;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<table class="table table-bordered table-sm ">
  <thead class="thead-dark">
    <tr>
      <th></th>
      <th>head1</th>
      <th>head2</th>
    </tr>
  </thead>
  <tbody>
    <tr class="clickable" data-toggle="collapse" data-target="#group-of-rows-1" aria-expanded="false" aria-controls="group-of-rows-1">
      <td class="tigray">title1</td>
      <td class="tigray">35</td>
      <td class="tigray">35</td>
    </tr>
  </tbody>

  <tbody id="group-of-rows-1" class="collapse">
    <tr class="clickable" data-toggle="collapse" data-target="#group-of-rows-2" aria-expanded="false" aria-controls="group-of-rows-2">
      <td class="zoba">nested 1</td>
      <td class="zoba">29</td>
      <td class="zoba">29</td>
      <tbody id="group-of-rows-2" class="collapse">
        <tr class="table-warning">
          <td>nested title1</td>
          <td>13</td>
          <td>13</td>
        </tr>
        <tr class="table-warning">
          <td>nested title2</td>
          <td>18</td>
          <td>13</td>
        </tr>
        <tr class="table-warning">
          <td>nested title 3</td>
          <td>32</td>
          <td>13</td>
        </tr>
      </tbody>
    </tr>

    <tr class="clickable" data-toggle="collapse" data-target="#group-of-rows-3" aria-expanded="false" aria-controls="group-of-rows-3">
      <td class="zoba">nested 2</td>
      <td class="zoba">29</td>
      <td class="zoba">29</td>
      <tbody id="group-of-rows-3" class="collapse">
        <tr class="table-warning">
          <td>nested title4</td>
          <td>13</td>
          <td>13</td>
        </tr>
        <tr class="table-warning">
          <td>nested title5</td>
          <td>18</td>
          <td>13</td>
        </tr>
        <tr class="table-warning">
          <td>nested title 6</td>
          <td>32</td>
          <td>13</td>
        </tr>
      </tbody>
    </tr>
  </tbody>
</table>

Answer 1

Вы не можете использовать tbody внутри другого тела это не разрешено HTML.

Следуйте этому коду ↓↓

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<table class="table table-bordered table-sm ">
  <thead class="thead-dark">
    <tr>
      <th></th>
      <th>head1</th>
      <th>head2</th>
    </tr>
  </thead>
  <tbody>
    <tr class="clickable" data-toggle="collapse" data-target=".group-of-rows-1" aria-expanded="false" aria-controls="group-of-rows-1">
      <td class="tigray">title1</td>
      <td class="tigray">35</td>
      <td class="tigray">35</td>
    </tr>
  </tbody>

  <tbody id="" class="collapse group-of-rows-1">
    <tr class="clickable" data-toggle="collapse" data-target="#group-of-rows-2" aria-expanded="false" aria-controls="group-of-rows-2">
      <td class="zoba">nested 1</td>
      <td class="zoba">29</td>
      <td class="zoba">29</td>
      
    </tr>
  </tbody>

  <tbody id="group-of-rows-2" class="collapse">
      <tr class="table-warning">
        <td>nested title1</td>
        <td>13</td>
        <td>13</td>
      </tr>
      <tr class="table-warning">
        <td>nested title2</td>
        <td>18</td>
        <td>13</td>
      </tr>
      <tr class="table-warning">
        <td>nested title 3</td>
        <td>32</td>
        <td>13</td>
      </tr>
    </tbody>
  <tbody id="" class="collapse group-of-rows-1">
    <tr class="clickable" data-toggle="collapse" data-target="#group-of-rows-3" aria-expanded="false" aria-controls="group-of-rows-3">
      <td class="zoba">nested 2</td>
      <td class="zoba">29</td>
      <td class="zoba">29</td>
      
    </tr>
    </tbody>
  <tbody id="group-of-rows-3" class="collapse">
      <tr class="table-warning">
        <td>nested title4</td>
        <td>13</td>
        <td>13</td>
      </tr>
      <tr class="table-warning">
        <td>nested title5</td>
        <td>18</td>
        <td>13</td>
      </tr>
      <tr class="table-warning">
        <td>nested title 6</td>
        <td>32</td>
        <td>13</td>
      </tr>
    </tbody>
</table>

Однако вам разрешено иметь несколько элементов TBODY в одном элементе TABLE, поэтому вы можете сделать это:

<table> 
  <tbody> 
    <tr> 
      <td>...</td> 
      <td>...</td> 
    </tr> 
  </tbody>
  <tbody > 
    <tr> 
      <td>...</td> 
      <td>...</td> 
    </tr> 
  </tbody>
  <tbody> 
    <tr> 
      <td>...</td> 
      <td>...</td> 
    </tr> 
  </tbody>
</table>