[英]Datatables Width Overflow For A Lot Of Columns
哇,我有jquery datatables插件這個嚴重的問題。 我有一個包含大量列(超過35列)的表,這個表溢出了我的div內容。
我嘗試過很多方法(包括在堆棧溢出時遇到相同問題的解決方案),但仍然無法解決這個問題。 所以,我真的需要你的幫助。 :)
謝謝,非常感謝你
你可以在這里看到截圖。
這是javascript代碼
var list_table = $("#list_table").dataTable({
"sScrollX": "100%",
"sScrollXInner": "110%",
"bScrollCollapse": true
});
這是html表
<table class="display" id="list_table">
<thead>
<tr>
<th rowspan="2">Account Code</th>
<th rowspan="2">Account Name</th>
<th colspan="3">January</th><th colspan="3">February</th><th colspan="3">March</th><th colspan="3">April</th><th colspan="3">May</th><th colspan="3">June</th><th colspan="3">July</th><th colspan="3">August</th><th colspan="3">September</th><th colspan="3">October</th><th colspan="3">November</th><th colspan="3">December
</th><th colspan="3">January s/d December
<!-- <th rowspan="2" class="link"></th>-->
</th></tr>
<tr>
<th>Budget</th>
<th>Actual</th>
<th>Variance</th>
<th>Budget</th>
<th>Actual</th>
<th>Variance</th>
<th>Budget</th>
<th>Actual</th>
<th>Variance</th>
<th>Budget</th>
<th>Actual</th>
<th>Variance</th>
<th>Budget</th>
<th>Actual</th>
<th>Variance</th>
<th>Budget</th>
<th>Actual</th>
<th>Variance</th>
<th>Budget</th>
<th>Actual</th>
<th>Variance</th>
<th>Budget</th>
<th>Actual</th>
<th>Variance</th>
<th>Budget</th>
<th>Actual</th>
<th>Variance</th>
<th>Budget</th>
<th>Actual</th>
<th>Variance</th>
<th>Budget</th>
<th>Actual</th>
<th>Variance</th>
<th>Budget</th>
<th>Actual</th>
<th>Variance</th>
<th>Budget</th>
<th>Actual</th>
<th>Variance</th>
</tr>
</thead>
<tbody>
<tr>
<td>5201010013</td>
<td><span class="coa-text">INSENTIVE/SHIFT ALLOWANCE</span><br> <span style="background: #778A52" class="attr-text">Divisi Anggaran dan Pajak</span> <span class="loc-text">InChina</span> <span class="asset-text">FA-GENSET</span> <span class="tenant-text">PT. Angin Rupiah</span> </td>
<td class="align-right">2,500,000.00</td>
<td class="align-right">0.00</td>
<td class="align-right">2,500,000.00</td>
<td class="align-right">2,500,000.00</td>
<td class="align-right">0.00</td>
<td class="align-right">2,500,000.00</td>
<td class="align-right">2,500,000.00</td>
<td class="align-right">0.00</td>
<td class="align-right">2,500,000.00</td>
<td class="align-right">2,500,000.00</td>
<td class="align-right">0.00</td>
<td class="align-right">2,500,000.00</td>
<td class="align-right">2,500,000.00</td>
<td class="align-right">0.00</td>
<td class="align-right">2,500,000.00</td>
<td class="align-right">2,500,000.00</td>
<td class="align-right">0.00</td>
<td class="align-right">2,500,000.00</td>
<td class="align-right">2,500,000.00</td>
<td class="align-right">0.00</td>
<td class="align-right">2,500,000.00</td>
<td class="align-right">2,500,000.00</td>
<td class="align-right">0.00</td>
<td class="align-right">2,500,000.00</td>
<td class="align-right">2,500,000.00</td>
<td class="align-right">0.00</td>
<td class="align-right">2,500,000.00</td>
<td class="align-right">2,500,000.00</td>
<td class="align-right">0.00</td>
<td class="align-right">2,500,000.00</td>
<td class="align-right">2,500,000.00</td>
<td class="align-right">0.00</td>
<td class="align-right">2,500,000.00</td>
<td class="align-right">2,500,000.00</td>
<td class="align-right">0.00</td>
<td class="align-right">2,500,000.00</td>
<td class="align-right">30,000,000.00</td>
<td class="align-right">0.00</td>
<td class="align-right">30,000,000.00</td>
</tr>
<tr>
<td>5203010001</td>
<td><span class="coa-text">MAKAN BERSAMA TAMU DAN REKANAN</span><br> <span style="background: #778A52" class="attr-text">Divisi Anggaran dan Pajak</span> <span class="loc-text">Satu Dua</span> </td>
<td class="align-right">1,500,000.00</td>
<td class="align-right">0.00</td>
<td class="align-right">1,500,000.00</td>
<td class="align-right">1,500,000.00</td>
<td class="align-right">0.00</td>
<td class="align-right">1,500,000.00</td>
<td class="align-right">1,500,000.00</td>
<td class="align-right">0.00</td>
<td class="align-right">1,500,000.00</td>
<td class="align-right">1,500,000.00</td>
<td class="align-right">0.00</td>
<td class="align-right">1,500,000.00</td>
<td class="align-right">1,500,000.00</td>
<td class="align-right">0.00</td>
<td class="align-right">1,500,000.00</td>
<td class="align-right">1,500,000.00</td>
<td class="align-right">0.00</td>
<td class="align-right">1,500,000.00</td>
<td class="align-right">1,500,000.00</td>
<td class="align-right">0.00</td>
<td class="align-right">1,500,000.00</td>
<td class="align-right">1,500,000.00</td>
<td class="align-right">0.00</td>
<td class="align-right">1,500,000.00</td>
<td class="align-right">1,500,000.00</td>
<td class="align-right">0.00</td>
<td class="align-right">1,500,000.00</td>
<td class="align-right">1,500,000.00</td>
<td class="align-right">7,000,000.00</td>
<td class="align-right">-5,500,000.00</td>
<td class="align-right">1,500,000.00</td>
<td class="align-right">0.00</td>
<td class="align-right">1,500,000.00</td>
<td class="align-right">1,500,000.00</td>
<td class="align-right">0.00</td>
<td class="align-right">1,500,000.00</td>
<td class="align-right">18,000,000.00</td>
<td class="align-right">7,000,000.00</td>
<td class="align-right">11,000,000.00</td>
</tr>
</tbody>
我建議首先刪除sScrollXInner(它不應該真的需要...... :-))。 然后看看包裝元素的寬度是多少。 它應該看起來像這樣的例子: http : //datatables.net/release-datatables/examples/basic_init/scroll_x.html
scrollX:true
當列寬溢出時,這將自動添加滾動條。
確保responsive: false
其他明智的你會在行的開頭看到一個(+)圖標
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.