スクロール時にテーブルのヘッダーをロックする（ColResizable）

Question

私はHTML、CSS、Javascriptに慣れていませんが、ユーザーがテーブルの列のサイズを変更できるようにする表システムを作成するだけでなく、ユーザーがテーブルをスクロールしたときに表示されるセクションの上部。

私はこれが混乱していると知っていますので、私は現在のものを正確に表すことができ、うまくいけばそれを更新する必要があるフィドルを作成しました。

私はJSColResizableはこちらをご覧プラグインを使用して解決しています http://www.bacubacu.com/colresizable/ と、テーブルのサイズを変更できるようにすることフィドルでそれを設定しています。私はまた、いつでも300pxの高さしか表示されないdivにテーブルをラップしました。

ユーザーがテーブル分割の上にマウスを置いてスクロールすると、テーブルヘッダーが部門外にスクロールして、ユーザーがどの列であったかを関連付けるのが難しくなります。私は単純に同じように動作し、divの外側をスクロールしながら、ヘッダーがdivの上部に静的になるようにテーブルエントリを必要とするだけで、より簡単に列に関連付けることができます。

誰でもこの問題を経験したことがありましたら、私は何か助けていただければ幸いです。

Answer 1

を田部の完全なコードをチェックアウトWorking Fiddleあなたが望むものの。

私はのjQueryコードを使用しています。

jQueryの

$(function(){ 
$.fn.fixMe = function() { 
    return this.each(function() { 
     var $this = $(this), 
      $t_fixed; 
     function init() { 
      $this.wrap('<div class="container" />'); 
      $t_fixed = $this.clone(); 
      $t_fixed.find("tbody").remove().end().addClass("fixed").insertBefore($this); 
      resizeFixed(); 
     } 
     function resizeFixed() { 
      $t_fixed.find("th").each(function (index) { 
       $(this).css("width", $this.find("th").eq(index).innerWidth() + "px"); 
      }); 
     } 
     function scrollFixed() { 
      var offset = $(this).scrollTop(), 
      tableOffsetTop = $this.offset().top, 
      tableOffsetBottom = tableOffsetTop + $this.height() - $this.find("thead").height(); 
      if (offset < tableOffsetTop || offset > tableOffsetBottom) { 
       $t_fixed.hide(); 
      } 
      else if (offset >= tableOffsetTop && offset <= tableOffsetBottom && $t_fixed.is(":hidden")) { 
       $t_fixed.show(); 
      } 
      var tboffBottom = (parseInt(tableOffsetBottom)); 
      var tboffTop = (parseInt(tableOffsetTop)); 

      if (offset >= tboffBottom && offset <= tableOffsetBottom) { 
       $t_fixed.find("th").each(function (index) { 
        $(this).css("width", $this.find("th").eq(index).outerWidth() + "px"); 
       }); 
      } 
     } 
     $(window).resize(resizeFixed); 
     $(window).scroll(scrollFixed); 
     init(); 
    }); 
}; 

$("table").fixMe(); 
}); 

が、これはあなたのお役に立てば幸いです。

Answer 2

現在、表に付箋の付いたヘッダーとフッターを使用する方法はありません。その機能を提供するすべてのライブラリは、それを達成するためにdivやその他のタグを使用します。言われているように、私はおそらくここでホイールを再発明しようとはしません。 SlickGridを試してみてください - それはかなり安定しており、巨大なデータセットであってもすごく効果的です

Answer 3

ここでは、テーブルやレイアウトを使用せずにテーブルをスクロールできるようにするCSSの方法を示します。ヘッダーを固定するために固定されています。この例を調べてみてください。それはあなたが望むものです。

.fixed_headers { 
    width: @table_width; 
    table-layout: fixed; 
    border-collapse: collapse; 

あなたはそれのために少しjqueryを記述する必要があり、ここでCSSのclass

があるこのcodepenリンクに

https://codepen.io/tjvantoll/pen/JEKIu