Overflow larghezza dati per un numero elevato di colonne

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.Overflow larghezza dati per un numero elevato di colonne

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.

enter image description here

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>

fonte

2011-12-28 bhoo-day

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

fonte

2011-12-28 11:25:13

Ciao Allan! ;-) Questo esempio usa sScrollXInner. E 'solo una proprietà deprecata? O senza la dichiarazione "110%" fa una larghezza automatica? –

Non è deprecato - in genere non dovrebbe essere necessario. DataTables dovrebbe consentire alla tabella di essere ampia come necessario senza il parametro sScrollXInner o larghezza 100% se la larghezza richiesta è inferiore al 100%. –

OMG Allan, funziona davvero uomo! Woah, sei assolutamente fantastico a conoscere questa roba. Grazie mille. ^^ –

Overflow larghezza dati per un numero elevato di colonne

risposta

Problemi correlati