0
ブートストラップタブシステムを使用して、DataTables
で形成されたさまざまなテーブルを表示しようとしています。それは、私がタブを切り替えると、thead
のサイジングを除いてすべての作品がうんざりします。ブートストラップタブでテーブルサイズが乱雑になる
HTML:
<div class="tab-content">
<div class="tab-pane active" id="overview" role="tabpanel">
<br/>
<table id="overview_table" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>
<th>{{ etf1 }}</th>
<th>{{ etf2 }}</th>
</tr>
</thead>
</table>
</div>
<div class="tab-pane" id="holdings" role="tabpanel">
<br/>
<table id="holdings_table" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>
<th>{{ etf1 }}</th>
<th>{{ etf2 }}</th>
</tr>
</thead>
</table>
</div>
<div class="tab-pane" id="performance" role="tabpanel">
<br/>
<table id="performance_table" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>
<th>{{ etf1 }}</th>
<th>{{ etf2 }}</th>
</tr>
</thead>
</table>
</div>
<div class="tab-pane" id="technicals" role="tabpanel">
<br/>
<table id="technicals_table" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>
<th>{{ etf1 }}</th>
<th>{{ etf2 }}</th>
</tr>
</thead>
</table>
</div>
</div>
Javascriptを:
$(document).ready(function() {
$.getJSON('/fund_monitor/api/get-comparison/{{ etf1 }}/{{ etf2 }}', function (data) {
$('#performance_table').DataTable({
data: data['overview'],
scrollY: 200,
scrollCollapse: true,
paging: false,
ordering: false,
responsive: true
});
$('#holdings_table').DataTable({
data: data['holdings'],
scrollY: 200,
scrollCollapse: true,
paging: false,
ordering: false,
responsive: true
});
$('#technicals_table').DataTable({
data: data['technicals'],
scrollY: 200,
scrollCollapse: true,
paging: false,
ordering: false,
responsive: true
});
$('#overview_table').DataTable({
data: data['overview'],
scrollY: 200,
scrollCollapse: true,
paging: false,
ordering: false,
responsive: true
});
のでthead
はので、私は、これは問題だと思う事前定義されています。 DataTable
コールの後にJavaScriptを使用してthead cells
のサイズを変更するにはどうすればよいですか?何が奇妙なのは、最初のタブは完全に正常に動作しますが、残りの部分は動作しないということです。
[表ヘッダ列が固定されたヘッダを使用して幅を維持しない]の可能な重複(https://stackoverflow.com/questions/22818254/table-header-columns-not-maintaining-width-using-fixed-header ) – Patrick