Overflow larghezza dati per un numero elevato di colonne

Question

Woah, Ho questo problema serio con il plug-in di dati jQuery. Ho una tabella con un sacco di colonne (oltre 35 colonne) e questa tabella è overflow il mio div contenuto.

Ho provato molti modi (inclusa la soluzione agli stessi problemi nello stack overflow) ma non ho potuto risolvere questo problema. Quindi, ho davvero bisogno del tuo aiuto qui, per favore. :)

grazie grazie tanto

Potete vedere lo screenshot qui.

Ecco il codice javascript

var list_table = $("#list_table").dataTable({ 
      "sScrollX": "100%", 
      "sScrollXInner": "110%", 
      "bScrollCollapse": true 
     }); 

Ecco la tabella 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

Io suggerirei di rimuovere la sScrollXInner primo luogo (non dovrebbe davvero necessario ... :-)). Quindi dai un'occhiata alla larghezza dell'elemento wrapper. Dovrebbe finire con questo esempio: http://datatables.net/release-datatables/examples/basic_init/scroll_x.html