Didi Didi - 1 year ago 118
HTML Question

Bootstrap collapse resize table



<div class="row">
<div class="col-md-8">
<h3 data-toggle="collapse" data-target="#collapseList" aria-expanded="false" aria-controls="collapseList"> 1 Lecturer List</h3>
<table class="table table-bordered collapse" id="collapseList">
<thead>
<tr>
<th>List Id</th>
<th>List Name</th>
<th>Total Subscribers</th>
<th>Action</th>
<th>Problems</th>
</tr>
</thead>
<tr>
<td>a</td>
<td>abcdefg</td>
<td>a</td>
<td>Synchronize</td>
<td>NOK</td>
</tr>
</table>
</div>
</div>





This is what I have when I click on the header label, it appears 1 second :

enter image description here

And after 1 second, this is what I have :

enter image description here

Why does my table is resized after the collapsing ? Is there a way to not resize the table ?

UPDATE :

Here's a JSfiddle, you can try and see yourself that there's a problem https://jsfiddle.net/0zw5a845/

Answer Source

Add the following CSS line to your main style sheet. This essentially overwrites the .collapse.in selector of the bootstrap style sheet.

.collapse.in {display:table}

Updated JSFiddle

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download