Я использую загрузчик 4. В моем проекте мне нужно переключить адаптивную таблицу внутри другой таблицы.Когда я нажимаю, чтобы развернуть показ внутренней таблицы, и снова нажмите, чтобы свернуть внутреннюю таблицу, как показано на рисунке ниже.
Вы можете использовать этот код для переключения адаптивной таблицы внутри другой таблицы
<!DOCTYPE html> <html> <head> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet"> <script async="" src="//www.google-analytics.com/analytics.js"></script><script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> </head> <body> <table class="table table-responsive table-hover"> <thead> <tr> <th>Column</th> <th>Column</th> <th>Column</th> <th>Column</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><i class="fa fa-plus" aria-hidden="true"></i></td> <td>data</td> <td>data</td> <td>data</td> </tr> </tbody> <tbody id="group-of-rows-1" class="collapse"> <tr> <td>- child row</td> <td>data 1</td> <td>data 1</td> <td>data 1</td> </tr> <tr> <td>- child row</td> <td>data 1</td> <td>data 1</td> <td>data 1</td> </tr> </tbody> <tbody> <tr class="clickable" data-toggle="collapse" data-target="#group-of-rows-2" aria-expanded="false" aria-controls="group-of-rows-2"> <td><i class="fa fa-plus" aria-hidden="true"></i></td> <td>data</td> <td>data</td> <td>data</td> </tr> </tbody> <tbody id="group-of-rows-2" class="collapse"> <tr> <td>- child row</td> <td>data 2</td> <td>data 2</td> <td>data 2</td> </tr> <tr> <td>- child row</td> <td>data 2</td> <td>data 2</td> <td>data 2</td> </tr> </tbody> </table> </body> </html>
