कॉलम के बहुत सारे के लिए डेटाटेबल्स चौड़ाई ओवरफ़्लो

Question

वाह, मुझे jquery डेटाटेबल्स प्लगइन के साथ यह गंभीर समस्या है। मेरे पास बहुत सारे कॉलम (35 कॉलम से अधिक) वाली एक टेबल है और यह तालिका मेरी div सामग्री को बहती है।

मैंने कई तरीकों की कोशिश की है (स्टैक ओवरफ़्लो में समान समस्याओं पर समाधान सहित) लेकिन अभी भी इस समस्या को हल नहीं कर सका। तो, कृपया मुझे आपकी मदद की ज़रूरत है, कृपया। :)

आप बहुत बहुत

आप स्क्रीनशॉट यहाँ देख सकते हैं धन्यवाद धन्यवाद।

यहाँ जावास्क्रिप्ट कोड

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