Help, how to do it correctly so that the collapse opens inside the pressed table? Now it opens at the very bottom of the table.

My code is:

<table class="table table-hover"> <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <tbody data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> </tbody> <tbody data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> <tr> <th scope="row">2</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> </tbody> </table> <div class="collapse" id="collapseExample"> <div class="card card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. </div> </div>

Found an example as it should: enter image description here

    1 answer 1

    Just like for example:

     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <div class="container"> <table class="table table-hover"> <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <tbody > <tr data-toggle="collapse" data-target="#collapseExample-1" aria-expanded="false" aria-controls="collapseExample-1"> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <td colspan="4" class="p-0"> <div class="collapse" id="collapseExample-1"> <div class="card card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. </div> </div> </td> </tr> <tr data-toggle="collapse" data-target="#collapseExample-2" aria-expanded="false" aria-controls="collapseExample-2"> <th scope="row">2</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <td colspan="4" class="p-0"> <div class="collapse" id="collapseExample-2"> <div class="card card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. </div> </div> </td> </tr> </tbody> </table> </div>