我在这里整理了一个 Bootply 演示:http: //www.bootply.com/Ss2aAnzqlZ。
根据http://getbootstrap.com/components/#panels-tables,它是一个带有表格的面板。但是,我还使面板可折叠。折叠位工作正常,但桌子本身不保持形状。正如您将在 Bootply 中看到的,当您第一次加载页面时,它不会填满面板的宽度。当您单击面板标题中的“改进”以折叠面板时,表格在动画期间占据整个面板宽度,然后消失。当您再次单击以显示面板内容时,表格是整个宽度,直到动画停止,此时,它会缩小到看起来像“自动”宽度的位置。
奇怪的是,检查 table 元素显示 table 本身是全宽的,但 thead、tbody 和 tfoot 不是。
我已经将其追踪到表中“collapse”类的存在。如果您在没有“折叠”类的情况下启动 Bootply,则它是全宽的,直到您折叠面板。当你展开它时,它会回到自动宽度。我不知道为什么……你呢?
这是片段,但折叠似乎没有在这里运行。Bootply 更好。
<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>