Woah, I have this serious problem with jquery datatables plugin. I have a table with a lot of columns (over 35 columns) and this table is overflow my div content.
I have tried many ways (including solution at same problems in stack overflow) but still couldn't solve this problem. So, I really need your help here, please. :)
Thank you thank you so much
You can see the screenshot here.
Here is the javascript code
var list_table = $("#list_table").dataTable({
"sScrollX": "100%",
"sScrollXInner": "110%",
"bScrollCollapse": true
});
Here is the html table
<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>
I'd suggest removing the sScrollXInner firstly (it shouldn't really be needed... :-) ). Then have a look at what the width of the wrapper element is. It should end up looking like this example: http://datatables.net/release-datatables/examples/basic_init/scroll_x.html
scrollX: true
This will automatically add a scroll bar when any overflow of column width.
Make sure responsive: false other wise you will see a (+) icon in the starting of row
来源：https://stackoverflow.com/questions/8655001/datatables-width-overflow-for-a-lot-of-columns