Why does a table in a collapsible Bootstrap panel change width? -

Why does a table in a collapsible Bootstrap panel change width? -

i have set bootply demonstration here: http://www.bootply.com/ss2aanzqlz.

it's panel table per http://getbootstrap.com/components/#panels-tables. however, i've made panel collapsible. collapsing bit works ok, table doesn't retain shape. you'll see in bootply, doesn't fill width of panel when first load page. when click "improvements" in panel header collapse panel, table takes total panel width during animation, disappears. when click 1 time again show panel content, table total width until animation stops, @ point, shrinks looks "auto" width.

oddly enough, inspecting table element shows table total width, thead, tbody , tfoot aren't.

i've sort of tracked downwards presence of "collapse" class in table. if start bootply without "collapse" class, it's total width until collapse panel. when expand it, goes auto width. don't know why ... you?

here's snippet, collapsing doesn't appear run here. bootply better.

class="snippet-code-html lang-html prettyprint-override"><link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <div style="margin:15px"> <div class="panel panel-default"> <div class="panel-heading"> <a href="#" data-toggle="collapse" data-target="#improvementspanel" aria-expanded="true" class="">improvements</a> </div> <table id="improvementspanel" class="table panel-collapse collapse in" aria-expanded="true" style=""> <thead> <tr> <th>description</th> <th class="text-right">qty</th> <th>uom</th> <th class="text-right">rate</th> <th class="text-right">value</th> </tr> </thead> <tbody> <tr> <td>item 1</td> <td class="text-right">133.00</td> <td>m²</td> <td class="text-right">425.00</td> <td class="text-right">56,525</td> </tr> <tr> <td>item 2</td> <td class="text-right">85.00</td> <td>m²</td> <td class="text-right">70.00</td> <td class="text-right">5,950</td> </tr> <tr> <td>item 3</td> <td class="text-right">25.00</td> <td>m²</td> <td class="text-right">100.00</td> <td class="text-right">2,500</td> </tr> <tr> <td>item 4</td> <td class="text-right"></td> <td></td> <td class="text-right"></td> <td class="text-right">1,500</td> </tr> </tbody> <tfoot> <tr> <th class="text-right" colspan="4">total</th> <th class="text-right">66,475</th> </tr> </tfoot> </table> </div> </div>

the collapse class toggles display style on table between none , block , appears interfering standard table css.

you can resolve putting table within div , setting div collapse rather table.

new bootply: http://www.bootply.com/l8h2odpmud

html:

<div style="margin: 15px"> <div class="panel panel-default"> <div class="panel-heading"> <a href="#" data-toggle="collapse" data-target="#improvementspanel" aria-expanded="true" class="">improvements</a> </div> <div id="improvementspanel" class="panel-collapse collapse in" aria-expanded="true"> <table class="table"> <thead> <tr> <th>description</th> <th class="text-right">qty</th> <th>uom</th> <th class="text-right">rate</th> <th class="text-right">value</th> </tr> </thead> <tbody> <tr> <td>item 1</td> <td class="text-right">133.00</td> <td>m²</td> <td class="text-right">425.00</td> <td class="text-right">56,525</td> </tr> <tr> <td>item 2</td> <td class="text-right">85.00</td> <td>m²</td> <td class="text-right">70.00</td> <td class="text-right">5,950</td> </tr> <tr> <td>item 3</td> <td class="text-right">25.00</td> <td>m²</td> <td class="text-right">100.00</td> <td class="text-right">2,500</td> </tr> <tr> <td>item 4</td> <td class="text-right"></td> <td></td> <td class="text-right"></td> <td class="text-right">1,500</td> </tr> </tbody> <tfoot> <tr> <th class="text-right" colspan="4">total</th> <th class="text-right">66,475</th> </tr> </tfoot> </table> </div> </div> </div>

twitter-bootstrap-3 panel html-table collapsable