スクロールテーブルのアイデア（トリッキー）

Question

私はしばらくの間これに取り組んできました。多くの行と多数の列を持つ表があるとします（ページが縦横にオーバーフローします）。最初の行（thead）を固定したい。

キャッチ：縦スクロールバーと横スクロールバーが常に表示されるようにします。すなわち、私は、ユーザが垂直スクロールバーを見つけるために水平にスクロールする必要はなく、逆もまた同様である。

私が思いつくのは、theadとtbodyを同期スクロールで2つの別々のテーブルに分割することですが、これはアライメントとセル幅のマッチングに問題があります。

どうすればこの問題を解決できますか？

Answer 1

。

テーブルのヘッダー部分をコピーし、それに新しいテーブルを作成します。この表は絶対位置です！ （position:absolute;）

ヘッダーテーブルを実テーブルと同じdivに配置します。 （元のヘッダー部分に完全に収まるはずです）。

使用jQueryのDIVのスクロールを管理し、代わりにヘッダを固執する...もちろん、このソリューションは、あなたの要件については、いくつかの前提条件になりますが、（簡単にされ、いくつかの利点があり

jQuery(document).ready(function() { 
    jQuery('#tableDiv').scroll(function() { 
     jQuery('#copiedHeaderTable').css('top', jQuery(this).scrollTop()); 
    }); 
}) 

メイン）。クローニングの前に手動でDIV、一致するセルの幅を確保するためのdiv内のコンテンツ番目のすべてをラップし、それぞれの幅を設定するには

編集：

jQuery('#headerRow th div').each(function() { 
    jQuery(this).css('width', jQuery(this).parent()[0].offsetWidth+'px'); 
}); 

Answer 2

私はjqueryのDataTableのプラグインを使用し、あなたが何をしたいの例はここにhttp://www.datatables.net/examples/basic_init/scroll_xy.html

Answer 3

2つのテーブルにテーブルを分割する必要性を全く見られないことができます。 次の表は1つの表を使用しても、ヘッダーをフリーズすることができます。 width:100%;とoverflow:auto;とdivの中にあなたのテーブルをラップ

：同様の効果を達成したい人へ

<table > 
    <thead><tr><th>This is my header</th></tr></thead> 
    <tbody style="max-height:100px;overflow:auto;display:block"> 
     <tr> 
      <td>col1</td> 
     </tr> 
     <tr> 
      <td>col1</td> 
     </tr><tr> 
      <td>col1</td> 
     </tr><tr> 
      <td>col1</td> 
     </tr><tr> 
      <td>col1</td> 
     </tr><tr> 
      <td>col1</td> 
     </tr><tr> 
      <td>col1</td> 
     </tr><tr> 
      <td>col1</td> 
     </tr><tr> 
      <td>col1</td> 
     </tr><tr> 
      <td>col1</td> 
     </tr><tr> 
      <td>col1</td> 
     </tr><tr> 
      <td>col1</td> 
     </tr><tr> 
      <td>col1</td> 
     </tr><tr> 
      <td>col1</td> 
     </tr><tr> 
      <td>col1</td> 
     </tr><tr> 
      <td>col1</td> 
     </tr><tr> 
      <td>col1</td> 
     </tr><tr> 
      <td>col1</td> 
     </tr><tr> 
      <td>col1</td> 
     </tr><tr> 
      <td>col1</td> 
     </tr> 
    </tbody> 
</table>