如何折叠所有表格行

Question

i have table rows inside a table, and also another nested table rows inside each row, my problem is i can collapse and expand in the nested table rows, but when i try to expand in the main table, only the first row is expanded the rest ones are expanded by default when i launch the program, how can i fix it.

this is my code

 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

You can not use tbody inside another tbody it is not legal HTML.

Follow this code ↓↓

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

However, you are allowed to have multiple TBODY elements in a single TABLE element, so you could do this:

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