Datatables Width Overflow For A Lot Of Columns

Question

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.

enter image description 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>

Allan Jardine · Accepted Answer · 2011-12-28 11:25:13Z

12

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

answered Dec 28, 2011 at 11:25

Allan Jardine

5,5315 gold badges33 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Greg Pettit Over a year ago

Hi Allan! ;-) That example uses sScrollXInner. Is that just a deprecated property? Or without the "110%" declaration it does an auto width?

Allan Jardine Over a year ago

Its not deprecated - it just shouldn't generally be needed. DataTables should allow the table to be as wide as needed without the sScrollXInner parameter, or 100% width if the required width is less than 100%.

deerawan Over a year ago

OMG Allan, it really works man! Woah, you're totally great know this stuff. Thank you very much. ^^

Rajiv Sharma · Accepted Answer · 2018-04-25 15:11:41Z

11

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

answered Apr 25, 2018 at 15:11

Rajiv Sharma

7,2021 gold badge54 silver badges58 bronze badges

Collectives™ on Stack Overflow

Datatables Width Overflow For A Lot Of Columns

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related