许多列的数据表宽度溢出

Question

哇,我有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>        

Answer 1

我建议首先删除sScrollXInner(它不应该真的需要...... :-)).然后看看包装元素的宽度是多少.它应该看起来像这样的例子:http://datatables.net/release-datatables/examples/basic_init/scroll_x.html

Answer 2

滚动X：真

当任何列宽溢出时，这将自动添加滚动条。

确保在responsive: false其他方面您会在行的开头看到一个 (+) 图标