![](/img/trans.png)
[英]jQuery Data Table Headers Not Aligned With Rows When In Bootstrap Tab
[英]Data Table header not aligned in bootstrap tab
我正在尝试将DataTable与Twitter引导选项卡一起使用,为此,我尝试遵循以下代码,它成功调用了dataTable并创建了dataTable,但对于tab2 DataTable标头却未对齐
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Data table 1</a>
</li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Data table 2</a>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<table class="table" id="table1">
<thead>
<tr>
<th>#</th>
<th>First table</th>
<th>First table</th>
<th>First table</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
</tbody>
</table>
</div>
<div role="tabpanel" class="tab-pane" id="profile">
<table class="table" id="table2">
<thead>
<tr>
<th>#</th>
<th>second table</th>
<th>second table</th>
<th>second table</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
当我添加scrollY
标头不对齐时
这是因为初始化和滚动table2时第二个选项卡被隐藏了。 这是工作示例。 jsFiddleDemo
$("#table1").DataTable({
"scrollY": 308,
"paging": false,
"responsive": true
});
$('a[href="#profile"]').one('click',function(){
setTimeout(function(){
$("#table2").DataTable({
"scrollY": 308,
"paging": false,
"responsive": true
});
},0);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.