I have a complex layout consisting of a navbar, a collapsible div, and a table within a container. My goal is to make the collapse div appear when clicking on a row in the table. However, I'm facing an issue where the entire structure of the page breaks when the collapse div appears - both the table and the navbar narrow down. I only want the div containing the table to narrow without affecting other elements. How can I resolve this issue?
Here is the HTML structure that I have implemented:
<nav></nav>
<div class="row">
<div class="col-9">
<table>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr data-toggle="collapse" data-target="#demo">
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="col-3 collapse">
<div class="container"></div>
</div>
</div>
I have also provided a sample in JSFiddle for better illustration: https://jsfiddle.net/3b612srg/