Javascript 许多列的Datatables宽度溢出_Javascript_Jquery_Width_Datatables

Javascript 许多列的Datatables宽度溢出

javascript jquery datatables

Javascript 许多列的Datatables宽度溢出,javascript,jquery,width,datatables,Javascript,Jquery,Width,Datatables,哇，我对jquery datatables插件有一个严重的问题。我有一个有很多列（超过35列）的表，这个表溢出了我的div内容我尝试了很多方法（包括解决堆栈溢出中的相同问题），但仍然无法解决这个问题。所以，我真的需要你的帮助谢谢，非常感谢你可以在这里看到截图下面是javascript代码 var list_table = $("#list_table").dataTable({ "sScrollX": "100%", "sScrollXI

哇，我对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>


帐户代码
帐户名
1月2日3月4月5日6月9日10月10日11月12日
一月s/d十二月
预算
实际的
方差
预算
实际的
方差
预算
实际的
方差
预算
实际的
方差
预算
实际的
方差
预算
实际的
方差
预算
实际的
方差
预算
实际的
方差
预算
实际的
方差
预算
实际的
方差
预算
实际的
方差
预算
实际的
方差
预算
实际的
方差
5201010013
中国发电机组有限责任公司的主动/轮班津贴。安金·鲁皮亚
2,500,000.00
0
2,500,000.00                               
2,500,000.00
0
2,500,000.00                               
2,500,000.00
0
2,500,000.00                               
2,500,000.00
0
2,500,000.00                               
2,500,000.00
0
2,500,000.00                               
2,500,000.00
0
2,500,000.00                               
2,500,000.00
0
2,500,000.00                               
2,500,000.00
0
2,500,000.00                               
2,500,000.00
0
2,500,000.00                               
2,500,000.00
0
2,500,000.00                               
2,500,000.00
0
2,500,000.00                               
2,500,000.00
0
2,500,000.00                               
30,000,000.00
0
30,000,000.00    
5203010001
在两个地区中，一个地区和另一个地区都是如此
1,500,000.00
0
1,500,000.00                               
1,500,000.00
0
1,500,000.00                               
1,500,000.00
0
1,500,000.00                               
1,500,000.00
0
1,500,000.00                               
1,500,000.00
0
1,500,000.00                               
1,500,000.00
0
1,500,000.00                               
1,500,000.00
0
1,500,000.00                               
1,500,000.00
0
1,500,000.00                               
1,500,000.00
0
1,500,000.00                               
1,500,000.00
7,000,000.00
-5,500,000.00                               
1,500,000.00
0
1,500,000.00                               
1,500,000.00
0
1,500,000.00                               
18,000,000.00
7,000,000.00
11,000,000.00

我建议首先移除SSCROLLXINER（实际上不需要它…：-）。然后看看包装器元素的宽度是多少。它应该以如下示例结束：

是的

这将在列宽溢出时自动添加滚动条

确保

responsive:false

否则您将在行的开头看到一个（+）图标

你好，艾伦！；-）该示例使用sScrollXInner。那只是一处废弃的房产吗？或者在没有“110%”声明的情况下，它会自动调整宽度？这并不是不推荐的，只是通常不需要。DataTables应该允许表在没有sScrollXInner参数的情况下尽可能宽，或者如果所需的宽度小于100%，则允许表的宽度为100%。天哪，Allan，它真的很管用！哇，你太棒了，知道这些。多谢各位^^