<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Tables</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-12">
<div class="panel-group panel-group-joined" id="accordion-test">
<div class="panel panel-default">
<div class="panel-heading main s-2" >
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion-test" href="#s-2" class="collapsed">AAA</a>
</h4>
</div>
<div id="s-2" class="panel-collapse collapse s-2">
<div class="panel-body">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-list"></i>ELEMENT</h3>
</div>
<div class="panel-body">
<table id="datatable-responsive-table-io-v-2" data-type-secteur="1" class="io-table-1 datatable-responsive table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th data-priority="1">L</th>
<th>T</th>
<th>S</th>
<th data-priority="1">V</th>
<th data-priority="1">D</th>
<th data-priority="1">Temp</th>
<th>Time</th>
</tr>
</thead>
<tbody>
<tr>
<td class="readingVal">V1</td>
<td>R1</td>
<td>S1</td>
<td class="3-5">-10.4</td>
<td class="diff-3-5">3</td>
<td class="Temp-5">-18.1</td>
<td class="Time-5">20286</td>
</tr>
<tr>
<td class="readingVal">V2</td>
<td>R2</td>
<td>S2</td>
<td class="3-1">-8</td>
<td class="diff-3-1">5.4</td>
<td class="Temp-1">-17.4</td>
<td class="Time-1">20286</td>
</tr>
</tbody>
</table>
<div class="clearfix"></div>
</div> <!-- closing panel-body radio -->
</div> <!-- closing panel-default radio -->
</div>
</div>
</div>
<div class="panel-heading main s-4" >
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion-test" href="#s-4" class="collapsed">BBB</a>
</h4>
</div>
<div id="s-4" class="panel-collapse collapse s-4">
<div class="panel-body">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-list"></i>ELEMENT</h3>
</div>
<div class="panel-body">
<table id="datatable-responsive-table-io-v-4" data-type-secteur="1" class="io-table-1 datatable-responsive table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th data-priority="1">L</th>
<th>T</th>
<th>S</th>
<th data-priority="1">V</th>
<th data-priority="1">D</th>
<th data-priority="1">Temp</th>
<th>Time</th>
</tr>
</thead>
<tbody>
<tr>
<td class="readingVal">V11</td>
<td>R11</td>
<td>S1</td>
<td class="3-5">-10.4</td>
<td class="diff-3-5">3</td>
<td class="Temp-5">-18.1</td>
<td class="Time-5">20286</td>
</tr>
<tr>
<td class="readingVal">V22</td>
<td>R22</td>
<td>S2</td>
<td class="3-1">-8</td>
<td class="diff-3-1">5.4</td>
<td class="Temp-1">-17.4</td>
<td class="Time-1">20286</td>
</tr>
</tbody>
</table>
<div class="clearfix"></div>
</div> <!-- closing panel-body radio -->
</div> <!-- closing panel-default radio -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
$("[id^='datatable-responsive-table-io-v-']").DataTable({
"bPaginate": false,
"bLengthChange": false,
"bInfo": false,
"responsive": true,
"colReorder": true,
"stateSave": true
});
$('#s-2').collapse('show');
我在bootstrap手风琴中的数据表。当我将结果屏幕调整为小于表格然后重新运行脚本时，我可以看到数据表没有调整大小。但是，如果我之后重新调整屏幕大小，那么表格会重新绘制并具有响应性......（就像屏幕正在刷新一样）
请参阅jsFiddle
如果我加上这个：
$(function() {
setTimeout(function(){ $(window).trigger('resize') }, 750);
});
它将在手风琴打开的情况下调整数据表的大小（如果所有的手风琴都打开，它们将全部调整大小，如果只有一个，只有这一个将调整大小。如果我在此之后打开手风琴，表格不会调整大小...）
我尝试过几件事。像这样：
$("[id^='s-']")
.collapse('show')
.on('shown.bs.collapse', function () {
$(window).trigger('resize');
});
jsFiddle with resizing on shown
部分工作。但是我不确定这是做这件事的好方法......而且，除了第一个标签之外我无法折叠所有标签，当我打开一个标签时，另一个应该关闭 - 就像第一个jsFiddle（最后，我希望第一个选项卡打开，表格要调整大小）
希望我的解释清楚。