Question

哇，我对jquery datatables插件有这个严重的问题。我有一个包含很多列（超过35列）的表，这个表溢出了我的div内容。

我尝试了很多方法（包括在堆栈溢出时遇到相同问题的解决方案），但仍无法解决此问题。所以，我真的需要你的帮助。：）

谢谢你非常感谢

您可以在此处查看截图。

enter image description here

这是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

scrollX：true

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

确保responsive: false其他方面你会在行的开头看到一个（+）图标

许多列的数据表宽度溢出

2 个答案: