2011-12-28 7 views
5

わかりました、私はこの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>   

答えて

7

は、私はそれがいけない(最初にsScrollXInnerを削除することをお勧めしたいです本当に必要とされる... :-))。次に、ラッパー要素の幅を調べます。この例のようになります:http://datatables.net/release-datatables/examples/basic_init/scroll_x.html

+0

こんにちはアラン! ;-)この例では、sScrollXInnerを使用しています。それは廃止された不動産ですか?または、 "110%"の宣言がなければ、自動幅がありますか? –

+0

非推奨ではありません。一般的には必要ありません。 DataTablesは、必要な幅がsScrollXInnerパラメータなしで必要な幅になるようにするか、必要な幅が100%未満の場合は100%幅にする必要があります。 –

+0

OMGアラン、それは本当に男の作品!うわー、あなたはこのことをよく知っています。どうもありがとうございました。 ^^ –

関連する問題