Bootstrap Collapse干扰响应表布局

Question

我之前提出了一个与此相关的问题，但我意识到我找错了树，所以我要重新开始。我不知道为什么这在昨天成为了一个问题，但我已经能够在jsFiddle上复制它了http://jsfiddle.net/dspitzle/22Sr5/4/。我有两个不同的表实例(下面包含代码)，唯一的区别是我分配了thead和tbody标记class='requests_targets collapse in'以启用折叠功能(使用标题中的V形按钮)。具有collapse类的表都被压扁了，所以很明显，响应表结构被覆盖了。

在Fiddle上，您会注意到，当折叠各部分时(在它们消失之前)，表格布局会短暂地自行更正。这到底是怎么回事？您可以看到，我所包含的唯一CSS和Javascript是jquery和bootstrap文件，以及一个切换按钮上V形的函数。

<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="table-responsive">
<table class="table table-striped table-condensed" id='request_header'>
<caption class="h2">Outstanding Requests [1]
<button class="btn section-toggle btn-default btn-sm" data-toggle="collapse" data-target=".requests_targets"><span class="icon_toggle glyphicon glyphicon-chevron-up"></span>
</button>
</caption>
<thead>
<tr>
<th>Name</th>
<th>Date</th>
<th>Service</th>
<th>Status</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>LastName, FirstName</td>
<td>2/28/2014</td>
<td>Books/Toys</td>
<td>In Progress</td>
<td><a href="#" class="btn btn-default btn-sm" =""><span class="glyphicon glyphicon-pencil"></span></a>
</td>
<td><a href="#" class="btn btn-default btn-sm" =""><span class="glyphicon glyphicon-pencil"></span> Child</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-sm-12">
<div class="table-responsive">
<table class="table table-striped table-condensed" id='request_header2'>
<caption class="h2">Outstanding Requests [1]
<button class="btn section-toggle btn-default btn-sm" data-toggle="collapse" data-target=".requests_targets"><span class="icon_toggle glyphicon glyphicon-chevron-up"></span>
</button>
</caption>
<thead class="requests_targets collapse in">
<tr>
<th>Name</th>
<th>Date</th>
<th>Service</th>
<th>Status</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody class="requests_targets collapse in">
<tr>
<td>LastName, FirstName</td>
<td>2/28/2014</td>
<td>Books/Toys</td>
<td>In Progress</td>
<td><a href="#" class="btn btn-default btn-sm" =""><span class="glyphicon glyphicon-pencil"></span></a>
</td>
<td><a href="#" class="btn btn-default btn-sm" =""><span class="glyphicon glyphicon-pencil"></span> Child</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>

编辑：奇怪，我一定是在发布之前不小心擦了代码

Answer 1

在样式表中使用以下内容。(调用bootstrap.css后)

#request_header .collapse.in,
#request_header2 .collapse.in {
display: table-row-group;
}

Answer 2

Bootstrap正在将表元素设置为display: block(而不是display: table等)。您可能需要使用回调来逆转这一点。

$('#myCollapsible').on('shown.bs.collapse', function () {
$('#request_header2 tr').css('display', 'table-row');
$('#request_header2 th, #request_header2 td').css('display', 'table-cell');
})

http://getbootstrap.com/javascript/#collapse

Answer 3

我认为，如果去掉可折叠表中的<caption />元素，并在表上方这样写<h2 />标题，效果会更好。

编辑：修复了断开的链接。

EDIT2：通过使表具有响应性来修复示例。