ユーザーがjQueryでビューの外にスクロールしたときに上部に固定されたテーブルヘッダー

145

ユーザーがビューの外にスクロールしたときにのみ、ヘッダーがページの上部にとどまるHTMLテーブルを設計しようとしています。たとえば、テーブルがページから500ピクセル下にある可能性があります。ユーザーがヘッダーを非表示にスクロールした場合（ブラウザーがウィンドウビューでヘッダーを検出しなくなった場合）、上部に表示されるようにするには、どうすればよいですか。 ？誰でも私にこれに対するJavascriptソリューションを与えることができますか？

<table>
  <thead>
    <tr>
      <th>Col1</th>
      <th>Col2</th>
      <th>Col3</th>
    </tr>
  </thead>
  <tbody>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
  </tbody>
</table>

したがって、上記の例で<thead>は、ページが表示されなくなった場合にでスクロールします。

重要：にスクロールバー（overflow：auto）があるソリューションを探していません<tbody>。

jquery  html  html-table 
— サム・デュフェル
ソース
2
— Brad Tofel
— Swastik Raj Ghosh
私は別の質問に対してこれに答えました、見てください。stackoverflow.com/a/56764334/9388978
— Ersel Aktas

回答:

131

scroll上のイベントハンドラーをタップし、固定位置のwindow別のハンドラーを使用しtableてページの上部にヘッダーを表示することにより、このようなことを行います。

HTML：

<table id="header-fixed"></table>

CSS：

#header-fixed {
    position: fixed;
    top: 0px; display:none;
    background-color:white;
}

JavaScript：

var tableOffset = $("#table-1").offset().top;
var $header = $("#table-1 > thead").clone();
var $fixedHeader = $("#header-fixed").append($header);

$(window).bind("scroll", function() {
    var offset = $(this).scrollTop();

    if (offset >= tableOffset && $fixedHeader.is(":hidden")) {
        $fixedHeader.show();
    }
    else if (offset < tableOffset) {
        $fixedHeader.hide();
    }
});

これにより、ユーザーが下にスクロールして元のテーブルヘッドを非表示にしたときにテーブルヘッドが表示されます。ユーザーがページを十分に上にスクロールすると、再び非表示になります。

作業例：http : //jsfiddle.net/andrewwhitaker/fj8wM/

— アンドリューウィテカー
ソース
60
私はこれを考えていましたが、内容に基づいてヘッダー列の幅が変化した場合はどうなりますか？列の幅が固定されていない場合、ヘッダー行がコンテンツ行と揃わない可能性があります。ちょっとした考え。
— Yzmir Ramirez、2011
16
この例は、列ヘッダーの名前が列データ値よりも短い場合は機能しません。そのフィドルを変更して、infoではなくinfooooooooのような値にしてみてください。テーブルを複製するときに設定されるハードコードされた幅のようなものを考えています。
— whiterook6 2013年
6
これには大きな制限があり、そのうちの少なくとも1つは、以外のコンテナでテーブルを使用する場合windowです。mkoryak.github.io/floatTheadには、より一般的に適用可能なソリューションがあります。
— Yuck
13
このかもしれないのヘルプ、それは私がやって巻き上げ何、それは@AndrewWhitakerのフォークダイナミック番目の幅を必要とする誰だ：jsfiddle.net/noahkoch/wLcjh/1
— ノア・コッホ
1
元のセルにパディングがある場合、ソリューションを使用した@NoahKoch固定ヘッダーは、元のヘッドほど幅が広くない場合があります。重複したセルにパディングを追加するソリューションを改善しました。JSFiddleのフォーク：jsfiddle.net/1n23m69u/2
— fandasson
46

さて、固定サイズの列に頼ったり、テーブル全体の高さを固定したりせずに、同じ効果を得ようとしていました。

私が思いついた解決策はハックです。これは、テーブル全体を複製してから、ヘッダー以外をすべて非表示にし、固定位置にすることで構成されます。

HTML

<div id="table-container">
<table id="maintable">
    <thead>
        <tr>
            <th>Col1</th>
            <th>Col2</th>
            <th>Col3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>info</td>
            <td>info</td>
            <td>info</td>
        </tr>
        <tr>
            <td>info</td>
            <td>info</td>
            <td>info</td>
        </tr>
        <tr>
            <td>info</td>
            <td>some really long line here instead</td>
            <td>info</td>
        </tr>
        <tr>
            <td>info</td>
            <td>info</td>
            <td>info</td>
        </tr>
                <tr>
            <td>info</td>
            <td>info</td>
            <td>info</td>
        </tr>
                <tr>
            <td>info</td>
            <td>info</td>
            <td>info</td>
        </tr>
        <tr>
            <td>info</td>
            <td>info</td>
            <td>info</td>
        </tr>
    </tbody>
</table>
<div id="bottom_anchor"></div>
</div>

CSS

body { height: 1000px; }
thead{
    background-color:white;
}

JavaScript

function moveScroll(){
    var scroll = $(window).scrollTop();
    var anchor_top = $("#maintable").offset().top;
    var anchor_bottom = $("#bottom_anchor").offset().top;
    if (scroll>anchor_top && scroll<anchor_bottom) {
    clone_table = $("#clone");
    if(clone_table.length == 0){
        clone_table = $("#maintable").clone();
        clone_table.attr('id', 'clone');
        clone_table.css({position:'fixed',
                 'pointer-events': 'none',
                 top:0});
        clone_table.width($("#maintable").width());
        $("#table-container").append(clone_table);
        $("#clone").css({visibility:'hidden'});
        $("#clone thead").css({'visibility':'visible','pointer-events':'auto'});
    }
    } else {
    $("#clone").remove();
    }
}
$(window).scroll(moveScroll);

こちらをご覧ください：http : //jsfiddle.net/QHQGF/7/

編集：theadがポインターイベントを受け取ることができるようにコードを更新しました（ヘッダーのボタンとリンクは引き続き機能します）。これにより、luhfluhとJoe Mによって報告された問題が修正されます。

ここに新しいjsfiddle：http ://jsfiddle.net/cjKEx/

— エントロピ
ソース
3
私は最初にそれを試しました、それの問題はヘッダーの要素のサイズがテーブルの内容に依存するということです。大きな内容の行がある場合、ヘッダーを含む列全体が大きくなります。theadだけを複製すると、その情報が失われ、目的の効果が得られません。承認された回答に関するYzmir Ramirezのコメントを参照してください。これは、固定幅の列なしで機能する唯一の方法です。それはきれいではありません、私が知っている、それは私がハックだったと私が言った方法です。
— エントロピー
1
あ、わかった。この方法は流動的な列で機能するので素晴らしいです。少しググってみましたが、その機能を持つ別の列は見つかりませんでした。とにかく、もし私がそれを何らかの形で成し遂げるなら、私はここでそれを言及します
— M2_
1
@luhfluh、ええ、問題はクローンされたテーブルのpointer-events：noneが原因でした。これは、クリックがクローンを通過して元のテーブルに移動するために使用されます。クローンされたテーブルのヘッダーでそれを元に戻し、ヘッダー（およびヘッダーのみ）をクリックできるようにすると、問題が解決します。これを反映するように投稿を更新しました:)
— エントロピー
4
<thead> <th>に境界線を追加する際の問題
— Jam Ville
1
@JamVille複製されたテーブルがあるのでvisibility: hidden。あなただけ隠すことができ#clone tbody、その後、あなたは境界線を設定することができます...作業フィドル：jsfiddle.net/QHQGF/1707
— Lajdákマレク
46

純粋なCSS（IE11サポートなし）：

table th {
    position: -webkit-sticky; // this is for all Safari (Desktop & iOS), not for Chrome
    position: sticky;
    top: 0;
    z-index: 5;
    background: #fff;
}
— イホル・ゼニック
ソース
1
私はこれがChromeで機能しているのを見ていません。検査ツールは-webkit-sticky、の無効な値として表示されますposition。
— カルメニズム
@carmenism -webkit-stickyはSafari（デスクトップおよびiOS）用であり、Chrome用ではありません。position: stickyバージョン56以降のChromeで動作します。両方のルールを設定する必要があります。-webkit-stickyまたsticky、コード例とまったく同じ順序で設定する必要があります。Safariが取得webkit-stickyし、他のすべてのブラウザはそれをで上書きしstickyます。
— Ihor Zenich
2
これを機能させることができませんでした。簡単なグーグルから、それはposition: stickyテーブル要素で動作しないように見えます。
— rjh 2017
3
thへの適用は私のために働いた：table thead tr th {...}
— nurp
1
theadにもtrにも機能しないため、thに適用する必要があります
— helado
26

これを行うプラグインを書きました。私はそれについて約1年間取り組んでおり、すべてのコーナーケースをかなりうまく処理すると思います：

  • オーバーフローのあるコンテナー内でのスクロール
  • ウィンドウ内でのスクロール
  • ウィンドウのサイズを変更するとどうなるかについて
  • イベントをヘッダーにバインドしておく
  • 最も重要なことは、それを機能させるためにテーブルのcssを変更することを強制しないことです

ここにいくつかのデモ/ドキュメントがあります：http :
//mkoryak.github.io/floatThead/

— mkoryak
ソース
多大な労力が必要ですが、IE 10では動作せず、firefox23 / ubuntuでウィンドウのサイズを変更する際にいくつかの癖があります。
— Janning 2013
2
参考：IE9および10の問題を最新バージョンで修正しました。
— mkoryak 2013年
2
jQueryを必要としないバージョンを作成できますか？
— Curtis W
2
おそらく彼はjqueryを使用していないため...そしていいえ-私はjqueryを使用しないバージョンを作成しません。
— mkoryak 2015年
1
私は単純なjQery tablesorterプラグインを使用しており、FAQによると、プラグインは#sortable td {..}などのCSSルールのほとんどを好きではありません。私は少し微調整しようとしましたが、それを機能させることができませんでした。
— マッシュ
25

列幅の変更に関する問題を修正することができました。私は上記のAndrewのソリューションから始めて（ありがとうございました！）、1つの小さなループを追加して、クローンのtdの幅を設定しました。

$("#header-fixed td").each(function(index){
    var index2 = index;
    $(this).width(function(index2){
        return $("#table-1 td").eq(index).width();
    });
});

これにより、テーブル全体を複製して本体を非表示にすることなく、問題が解決されます。私はJavaScriptとjQuery（およびスタックオーバーフロー）がまったく新しいので、どんなコメントでも歓迎します。

— Rockusbacchus
ソース
4
うまくいきましたが、次の行を追加する必要がありました$（ "＃header-fixed"）。width（$（ "＃table-1"）。width（））; 列が正しく整列するようにします。
— イリヤFedotov
17

これは、固定されたテーブルヘッダーを持つために私が見つけた最善の解決策です。

更新5/11：ケリージョンソンによって指摘された水平スクロールのバグを修正

Codepen：https ://codepen.io/josephting/pen/demELL

;(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.width($this.outerWidth());
            $t_fixed.find("th").each(function(index) {
               $(this).css("width",$this.find("th").eq(index).outerWidth()+"px");
            });
         }
         function scrollFixed() {
            var offsetY = $(this).scrollTop(),
            offsetX = $(this).scrollLeft(),
            tableOffsetTop = $this.offset().top,
            tableOffsetBottom = tableOffsetTop + $this.height() - $this.find("thead").height(),
            tableOffsetLeft = $this.offset().left;
            if(offsetY < tableOffsetTop || offsetY > tableOffsetBottom)
               $t_fixed.hide();
            else if(offsetY >= tableOffsetTop && offsetY <= tableOffsetBottom && $t_fixed.is(":hidden"))
               $t_fixed.show();
            $t_fixed.css("left", tableOffsetLeft - offsetX + "px");
         }
         $(window).resize(resizeFixed);
         $(window).scroll(scrollFixed);
         init();
      });
   };
})(jQuery);

$(document).ready(function(){
   $("table").fixMe();
   $(".up").click(function() {
      $('html, body').animate({
      scrollTop: 0
   }, 2000);
 });
});
body{
  font:1.2em normal Arial,sans-serif;
  color:#34495E;
}

h1{
  text-align:center;
  text-transform:uppercase;
  letter-spacing:-2px;
  font-size:2.5em;
  margin:20px 0;
}

.container{
  width:90%;
  margin:auto;
}

table{
  border-collapse:collapse;
  width:100%;
}

.blue{
  border:2px solid #1ABC9C;
}

.blue thead{
  background:#1ABC9C;
}

.purple{
  border:2px solid #9B59B6;
}

.purple thead{
  background:#9B59B6;
}

thead{
  color:white;
}

th,td{
  text-align:center;
  padding:5px 0;
}

tbody tr:nth-child(even){
  background:#ECF0F1;
}

tbody tr:hover{
background:#BDC3C7;
  color:#FFFFFF;
}

.fixed{
  top:0;
  position:fixed;
  width:auto;
  display:none;
  border:none;
}

.scrollMore{
  margin-top:600px;
}

.up{
  cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>&darr; SCROLL &darr;</h1>
<table class="blue">
  <thead>
    <tr>
      <th>Colonne 1</th>
      <th>Colonne 2</th>
      <th>Colonne 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Non</td>
      <td>MaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
       <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
  </tbody>
</table>

<h1 class="scrollMore">&darr; SCROLL MORE &darr;</h1>
<table class="purple">
  <thead>
    <tr>
      <th>Colonne 1</th>
      <th>Colonne 2</th>
      <th>Colonne 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
       <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
       <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
  </tbody>
</table>
<h1 class="up scrollMore">&uarr; UP &uarr;</h1>
スニペットを展開

— ジョセフ
ソース
このスクリプトを修正して、ボーダーとパディングを持つ<th>要素を処理できるようにしました（そうしないと、固定ヘッダーの<th>の幅が広すぎます）。resizeFixed（）関数定義でに変更outerWidthするだけwidthです。
— 16年
また、CSSプロパティをクラスのz-indexいくつかの正の数に.fixed追加して、テーブルでページロード後にレンダリングされたオブジェクトがスクロール時に固定ヘッダーの上に浮かないようにする必要がある場合もあります。
— 16年
シンプルで便利。
— RitchieD 2017
上の位置を動的に処理する方法。メインページの固定ヘッダーコンテンツの下までスクロールする必要があるとしましょう。.fixed {top：0;}。
— VijayVishnu 2017
2
@KerryJohnsonメモをありがとう。水平スクロールと動的な列幅をサポートするように、いくつかの変更を加えました。
— 18年
7

最善の解決策は、このjqueryプラグインを使用することです。

https://github.com/jmosbech/StickyTableHeaders

このプラグインは私たちにとってはうまく機能し、他にも多くの解決策を試しました。IE、Chrome、Firefoxでテストしました

— Janning
ソース
ヘッダーのデータバインドされたコントロールの機能を保持するソリューションを知っていますか？
— Csaba Toth 2014
私にとっては機能しませんでした。「scrollableArea」オプションを使用しても、ヘッダーがテーブルの外にあり、ブラウザー（ウィンドウ）の上部に固定されています。追加のコメントなしで、これは以前に言及されたことがわかりました。多分それは彼が使用するCSSを必要とし、それを動作させるために利用できません。
— Exel Gamboa 2017年
6

ここには本当に良い解決策がたくさんあります。しかし、これらの状況で私が使用する最も単純なCSSのみのソリューションの1つは次のとおりです。

table {
  /* Not required only for visualizing */
  border-collapse: collapse;
  width: 100%;
}

table thead tr th {
  /* Important */
  background-color: red;
  position: sticky;
  z-index: 100;
  top: 0;
}

td {
  /* Not required only for visualizing */
  padding: 1em;
}
<table>
  <thead>
    <tr>
      <th>Col1</th>
      <th>Col2</th>
      <th>Col3</th>
    </tr>
  </thead>
  <tbody>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
  </tbody>
</table>
スニペットを展開

JavaScriptの必要がないため、状況が大幅に簡素化されます。基本的に、2番目の CSSルールに焦点を当てる必要があります。これには、スクロールスペースに関係なく、テーブルのヘッドが最上部に留まるようにするための条件が含まれています。

各ルールについて詳しく説明します。positionは、ヘッドオブジェクト、その行、およびそのセルがすべて上にくっつく必要があることをブラウザに示すためのものです。これには必ずを伴う必要があります。これtopは、ヘッドがページまたはビューポートの上部にくっつくことをブラウザに指定します。さらに、z-index頭のコンテンツが常に上部に残るように追加できます。

背景色は単にポイントを説明するためのものです。この効果を得るために追加のJavaScriptを使用する必要はありません。これは、2016年以降、ほとんどの主要なブラウザーでサポートされています。

— Srivats Shankar
ソース
1
シンプルでクリーンな答えの場合、常に1つの問題を解決する簡単な方法があります。これが事実です。angularjsでng-repeatを使用していますが、それは魅力のように機能しています。
— デビッドカストロ
5

Sticky Table HeadersというシンプルなjQueryライブラリを見つけました。2行のコードで、まさに私が望んでいたことを行いました。上記のソリューションは列幅を管理しないため、多くのスペースを占めるテーブルセルがある場合、永続ヘッダーの結果のサイズはテーブルの幅と一致しません。

http://plugins.jquery.com/StickyTableHeaders/

使用情報はこちら：https : //github.com/jmosbech/StickyTableHeaders

— ロク・ヤンウォン
ソース
3

あなたはこのアプローチを使うことができます、純粋なHTMLとCSSはJSを必要としません:) 

.table-fixed-header {
  display: flex;
  justify-content: space-between;
  margin-right: 18px
}

.table-fixed {
  display: flex;
  justify-content: space-between;
  height: 150px;
  overflow: scroll;
}

.column {
  flex-basis: 24%;
  border-radius: 5px;
  padding: 5px;
  text-align: center;
}
.column .title {
  border-bottom: 2px grey solid;
  border-top: 2px grey solid;
  text-align: center;
  display: block;
  font-weight: bold;
}

.cell {
  padding: 5px;
  border-right: 1px solid;
  border-left: 1px solid;
}

.cell:nth-of-type(even) {
  background-color: lightgrey;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Fixed header Bin</title>
</head>
<body>
<div class="table-fixed-header">
    
    <div class="column">
      <span class="title">col 1</span>
    </div>
    <div class="column">
      <span class="title">col 2</span>
    </div>
    <div class="column">
      <span class="title">col 3</span>
    </div>
    <div class="column">
      <span class="title">col 4</span>
    </div>
    
  </div>
  
  <div class="table-fixed">
    
    <div class="column">
      <div class="cell">alpha</div>
      <div class="cell">beta</div>
      <div class="cell">ceta</div>
    </div>
    
    <div class="column">
      <div class="cell">alpha</div>
      <div class="cell">beta</div>
      <div class="cell">ceta</div>
      <div class="cell">alpha</div>
      <div class="cell">beta</div>
      <div class="cell">ceta</div>
      <div class="cell">alpha</div>
      <div class="cell">beta</div>
      <div class="cell">ceta</div>
    </div>
    
    <div class="column">
      <div class="cell">alpha</div>
      <div class="cell">beta</div>
      <div class="cell">ceta</div>
      <div class="cell">beta</div>
      <div class="cell">beta</div>
      <div class="cell">beta</div>
      
    </div>
    
    <div class="column">
      <div class="cell">alpha</div>
      <div class="cell">beta</div>
      <div class="cell">ceta</div>
    </div>
    
  </div>
</body>
</html>
スニペットを展開

— ゼリロフ
ソース
3

JQueryを使用せず、CSSのみを使用する簡単なソリューションを見つけました。

固定コンテンツを「th」タグ内に配置してCSSを追加する必要があります

table th {
    position:sticky;
    top:0;
    z-index:1;
    border-top:0;
    background: #ededed;
}

位置、Zインデックス、トッププロパティで十分です。しかし、残りを適用して、より良いビューを与えることができます。

— アビダス
ソース
2

私も、エントロフィのコードを使用して境界線の書式が表示されないのと同じ問題を経験しましたが、いくつかの小さな修正があり、テーブルが拡張可能になり、追加できるすべてのCSSスタイルルールが表示されます。

CSSに追加：

#maintable{width: 100%}

次に、新しいjavascriptを示します。

    function moveScroll(){
    var scroll = $(window).scrollTop();
    var anchor_top = $("#maintable").offset().top;
    var anchor_bottom = $("#bottom_anchor").offset().top;
    if (scroll > anchor_top && scroll < anchor_bottom) {
        clone_table = $("#clone");
        if(clone_table.length === 0) {          
            clone_table = $("#maintable").clone();
            clone_table.attr({id: "clone"})
            .css({
                position: "fixed",
                "pointer-events": "none",
                 top:0
            })
            .width($("#maintable").width());

            $("#table-container").append(clone_table);
            // dont hide the whole table or you lose border style & 
            // actively match the inline width to the #maintable width if the 
            // container holding the table (window, iframe, div) changes width          
            $("#clone").width($("#maintable").width());
            // only the clone thead remains visible
            $("#clone thead").css({
                visibility:"visible"
            });
            // clone tbody is hidden
            $("#clone tbody").css({
                visibility:"hidden"
            });
            // add support for a tfoot element
            // and hide its cloned version too
            var footEl = $("#clone tfoot");
            if(footEl.length){
                footEl.css({
                    visibility:"hidden"
                });
            }
        }
    } 
    else {
        $("#clone").remove();
    }
}
$(window).scroll(moveScroll);
— seeit360
ソース
境界線の書式設定がヘッダーに入る限り、これはエントロピーのソリューションよりもうまく機能します。ただし、現在のFirefox（Chromeではない）では、スクロールが開始されると、表の下にセル境界のアーティファクトが表示されます。
— 16年
2

これは、受け入れられた答えに基づいたソリューションです。列幅、一致するテーブルスタイル、およびコンテナdivでテーブルがスクロールされるタイミングを修正します。

使用法

<thead>広告コンテンツのみが修正されるため、テーブルにタグがあることを確認してください。

$("#header-fixed").fixHeader();

JavaSript

//Custom JQuery Plugin
(function ($) {
    $.fn.fixHeader = function () {
        return this.each(function () {
            var $table = $(this);
            var $sp = $table.scrollParent();
            var tableOffset = $table.position().top;
            var $tableFixed = $("<table />")
                .prop('class', $table.prop('class'))
                .css({ position: "fixed", "table-layout": "fixed", display: "none", "margin-top": "0px" });
            $table.before($tableFixed);
            $tableFixed.append($table.find("thead").clone());

            $sp.bind("scroll", function () {
                var offset = $(this).scrollTop();

                if (offset > tableOffset && $tableFixed.is(":hidden")) {
                    $tableFixed.show();
                    var p = $table.position();
                    var offset = $sp.offset();

                    //Set the left and width to match the source table and the top to match the scroll parent
                    $tableFixed.css({ left: p.left + "px", top: (offset ? offset.top : 0) + "px", }).width($table.width());

                    //Set the width of each column to match the source table
                    $.each($table.find('th, td'), function (i, th) {
                        $($tableFixed.find('th, td')[i]).width($(th).width());
                    });

                }
                else if (offset <= tableOffset && !$tableFixed.is(":hidden")) {
                    $tableFixed.hide();
                }
            });
        });
    };
})(jQuery);
— ベン・グリプカ
ソース
1
これは私にはうまくいきました。横にスクロールする必要があるテーブルの問題のみです。ここでJSFiddle を更新しましたjsfiddle.net/4mgneob1/1 $sp.scrollLeft()左からスクロールした量を差し引くので、固定テーブルを下にスクロールすると正しく配置されます。また、左の位置を調整するために固定テーブルが表示されているかどうかを水平にスクロールするときにチェックを追加しました。私が解決できなかったもう1つの問題は、テーブルがビューポートの上に来ると、ユーザーが上にスクロールするまで固定テーブルが非表示になるはずです。
— Henesnarfel
1
取得Uncaught TypeError: $table.scrollParent is not a function
— karlingen
1

これは、データとともに水平方向にスクロールできる固定ヘッダーを作成するのに役立ちます。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Shubh</title>



<script type="text/javascript">
    var lastSeen = [ 0, 0 ];
    function checkScroll(div1, div2) {
        if (!div1 || !div2)
            return;
        var control = null;
        if (div1.scrollLeft != lastSeen[0])
            control = div1;
        else if (div2.scrollLeft != lastSeen[1])
            control = div2;
        if (control == null)
            return;
        else
            div1.scrollLeft = div2.scrollLeft = control.scrollLeft;
        lastSeen[0] = div1.scrollLeft;
        lastSeen[1] = div2.scrollLeft;
    }

    window
            .setInterval(
                    "checkScroll(document.getElementById('innertablediv'), document.getElementById('headertable'))",
                    1);
</script>

<style type="text/css">
#full {
    width: 400px;
    height: 300px;
}

#innertablediv {
    height: 200px;
    overflow: auto;
}

#headertable {
    overflow: hidden;
}
</style>
</head>
<body>

    <div id="full">




        <div id="headertable">
            <table border="1" bgcolor="grey" width="150px" id="headertable">
                <tr>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>

                    <td>&nbsp;&nbsp;&nbsp;</td>
                </tr>

            </table>
        </div>




        <div id="innertablediv">

            <table border="1" id="innertableid">
                <tr>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                </tr>
                <tr>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                </tr>
                <tr>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                </tr>
                <tr>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                </tr>
                <tr>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                </tr>
                <tr>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                </tr>
                <tr>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                </tr>
                <tr>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                </tr>
                <tr>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                </tr>

            </table>
        </div>
    </div>
</body>
</html>
— user2669926
ソース
これは、データとともに水平方向にスクロールできる固定ヘッダーを作成するのに役立ちます。
— user2669926 2013
1 
function fix_table_header_position(){
 var width_list = [];
 $("th").each(function(){
    width_list.push($(this).width());
 });
 $("tr:first").css("position", "absolute");
 $("tr:first").css("z-index", "1000");
 $("th, td").each(function(index){
    $(this).width(width_list[index]);
 });

 $("tr:first").after("<tr height=" + $("tr:first").height() + "></tr>");}

これは私の解決策です

— JustWe
ソース
1

パーティーには少し遅れますが、同じページにある複数のテーブルを操作し、「ジャンク」フリー（requestAnimationFrameを使用）で動作する実装があります。また、列に幅を設ける必要はありません。水平スクロールも機能します。

ヘッダーはで定義されているdivため、必要に応じて、ボタンなどのマークアップを自由に追加できます。これが必要なすべてのHTMLです。

<div class="tbl-resp">
  <table id="tbl1" class="tbl-resp__tbl">
     <thead>
      <tr>
        <th>col 1</th>
        <th>col 2</th>
        <th>col 3</th>
      </tr>
    </thead> 
  </table>
</div>

https://jsfiddle.net/lloydleo/bk5pt5gs/

— レオ
ソース
1

このソリューションでは、固定ヘッダーが動的に作成され、コンテンツとスタイルがTHEADから複製されます

必要なのは、たとえば2行だけです。

var $myfixedHeader = $("#Ttodo").FixedHeader(); //create fixed header $(window).scroll($myfixedHeader.moveScroll); //bind function to scroll event

以下に提供されているjqueryプラグインFixedHeaderとgetStyleObjectは、ファイル.jsに入れることができます

// JAVASCRIPT



/*
 * getStyleObject Plugin for jQuery JavaScript Library
 * From: http://upshots.org/?p=112
 
Basic usage:
$.fn.copyCSS = function(source){
  var styles = $(source).getStyleObject();
  this.css(styles);
}
*/

(function($){
    $.fn.getStyleObject = function(){
        var dom = this.get(0);
        var style;
        var returns = {};
        if(window.getComputedStyle){
            var camelize = function(a,b){
                return b.toUpperCase();
            };
            style = window.getComputedStyle(dom, null);
            for(var i = 0, l = style.length; i < l; i++){
                var prop = style[i];
                var camel = prop.replace(/\-([a-z])/g, camelize);
                var val = style.getPropertyValue(prop);
                returns[camel] = val;
            };
            return returns;
        };
        if(style = dom.currentStyle){
            for(var prop in style){
                returns[prop] = style[prop];
            };
            return returns;
        };
        return this.css();
    }
})(jQuery);



   
//Floating Header of long table  PiotrC
(function ( $ ) {
    var tableTop,tableBottom,ClnH;
    $.fn.FixedHeader = function(){
        tableTop=this.offset().top,
        tableBottom=this.outerHeight()+tableTop;
        //Add Fixed header
        this.after('<table id="fixH"></table>');
        //Clone Header
        ClnH=$("#fixH").html(this.find("thead").clone());
        //set style
        ClnH.css({'position':'fixed', 'top':'0', 'zIndex':'60', 'display':'none',
        'border-collapse': this.css('border-collapse'),
		'border-spacing': this.css('border-spacing'),
        'margin-left': this.css('margin-left'),
        'width': this.css('width')            
        });
        //rewrite style cell of header
        $.each(this.find("thead>tr>th"), function(ind,val){
            $(ClnH.find('tr>th')[ind]).css($(val).getStyleObject());
        });
    return ClnH;}
    
    $.fn.moveScroll=function(){
        var offset = $(window).scrollTop();
        if (offset > tableTop && offset<tableBottom){
            if(ClnH.is(":hidden"))ClnH.show();
            $("#fixH").css('margin-left',"-"+$(window).scrollLeft()+"px");
        }
        else if (offset < tableTop || offset>tableBottom){
            if(!ClnH.is(':hidden'))ClnH.hide();
        }
    };
})( jQuery );





var $myfixedHeader = $("#repTb").FixedHeader();
$(window).scroll($myfixedHeader.moveScroll);
/* CSS - important only NOT transparent background */

#repTB{border-collapse: separate;border-spacing: 0;}

#repTb thead,#fixH thead{background: #e0e0e0 linear-gradient(#d8d8d8 0%, #e0e0e0 25%, #e0e0e0 75%, #d8d8d8 100%) repeat scroll 0 0;border:1px solid #CCCCCC;}

#repTb td{border:1px solid black}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<h3>example</h3> 
<table id="repTb">
<thead>
<tr><th>Col1</th><th>Column2</th><th>Description</th></tr>
</thead>
<tr><td>info</td><td>info</td><td>info</td></tr>
<tr><td>info</td><td>info</td><td>info</td></tr>
<tr><td>info</td><td>info</td><td>info</td></tr>
<tr><td>info</td><td>info</td><td>info</td></tr>
<tr><td>info</td><td>info</td><td>info</td></tr>
<tr><td>info</td><td>info</td><td>info</td></tr>
<tr><td>info</td><td>info</td><td>info</td></tr>
<tr><td>info</td><td>info</td><td>info</td></tr>
<tr><td>info</td><td>info</td><td>info</td></tr>
<tr><td>info</td><td>info</td><td>info</td></tr>
<tr><td>info</td><td>info</td><td>info</td></tr>
</table>
スニペットを展開

— ピオトルC.
ソース
1

メインテーブルと同じヘッダーで追加のテーブルを作成します。1つの行とすべてのヘッダーを含む新しいテーブルにtheadを置くだけです。絶対位置と背景を​​白にします。メインテーブルの場合は、divに配置し、高さとオーバーフロー-yスクロールを使用します。このようにして、新しいテーブルはメインテーブルのヘッダーを克服し、そこにとどまります。divですべてを囲みます。以下は、大まかなコードです。

      <div class="col-sm-8">

        <table id="header-fixed" class="table table-bordered table-hover" style="width: 351px;position: absolute;background: white;">
        <thead>
        <tr>
            <th>Col1</th>
            <th>Col2</th>
            <th>Col3</th>
        </tr>
    </thead>
      </table>


    <div style="height: 300px;overflow-y: scroll;">
          <table id="tableMain" class="table table-bordered table-hover" style="table-layout:fixed;overflow-wrap: break-word;cursor:pointer">
<thead>
    <tr>
      <th>Col1</th>
      <th>Col2</th>
      <th>Col3</th>
    </tr>
  </thead>
  <tbody>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
  </tbody>

                                    </table>
              </div>
        </div>
— 初心者_JS
ソース
1 

div.wrapper {
    padding:20px;
}
table.scroll thead {
    width: 100%;
    background: #FC6822;
}
table.scroll thead tr:after {
    content: '';
    overflow-y: scroll;
    visibility: hidden;
}
table.scroll thead th {
    flex: 1 auto;
    display: block;
    color: #fff;
}
table.scroll tbody {
    display: block;
    width: 100%;
    overflow-y: auto;
    height: auto;
    max-height: 200px;
}
table.scroll thead tr,
table.scroll tbody tr {
    display: flex;
}
table.scroll tbody tr td {
    flex: 1 auto;
    word-wrap: break;
}
table.scroll thead tr th,
table.scroll tbody tr td {
    width: 25%;
    padding: 5px;
    text-align-left;
    border-bottom: 1px solid rgba(0,0,0,0.3);
}
<div class="wrapper">
    <table border="0" cellpadding="0" cellspacing="0" class="scroll">
        <thead>
            <tr>
                <th>Name</th>
                <th>Vorname</th>
                <th>Beruf</th>
                <th>Alter</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Müller</td>
                <td>Marie</td>
                <td>Künstlerin</td>
                <td>26</td>
            </tr>
            <tr>
                <td>Meier</td>
                <td>Stefan</td>
                <td>Chemiker</td>
                <td>52</td>
            </tr>
            <tr>
                <td>Schmidt</td>
                <td>Sabrine</td>
                <td>Studentin</td>
                <td>38</td>
            </tr>
            <tr>
                <td>Mustermann</td>
                <td>Max</td>
                <td>Lehrer</td>
                <td>41</td>
            </tr>
            <tr>
                <td>Müller</td>
                <td>Marie</td>
                <td>Künstlerin</td>
                <td>26</td>
            </tr>
            <tr>
                <td>Meier</td>
                <td>Stefan</td>
                <td>Chemiker</td>
                <td>52</td>
            </tr>
            <tr>
                <td>Schmidt</td>
                <td>Sabrine</td>
                <td>Studentin</td>
                <td>38</td>
            </tr>
            <tr>
                <td>Mustermann</td>
                <td>Max</td>
                <td>Lehrer</td>
                <td>41</td>
            </tr>
            <tr>
                <td>Müller</td>
                <td>Marie</td>
                <td>Künstlerin</td>
                <td>26</td>
            </tr>
            <tr>
                <td>Meier</td>
                <td>Stefan</td>
                <td>Chemiker</td>
                <td>52</td>
            </tr>
            <tr>
                <td>Schmidt</td>
                <td>Sabrine</td>
                <td>Studentin</td>
                <td>38</td>
            </tr>
            <tr>
                <td>Mustermann</td>
                <td>Max</td>
                <td>Lehrer</td>
                <td>41</td>
            </tr>
        </tbody>
    </table>
</div>
スニペットを展開

デモ： CSS固定テーブルヘッダーのデモ

— revilodesign.de
ソース
0

これは、スタイルプロパティ変換を使用して実現できます。あなたがしなければならないのは、固定高さとオーバーフローが自動に設定されたいくつかのdivにテーブルをラップすることだけです。

.tableWrapper {
  overflow: auto;
  height: calc( 100% - 10rem );
}

そして、そこにonscrollハンドラをアタッチできます。ここでは、でラップされた各テーブルを見つけるメソッドがあります<div class="tableWrapper"></div>。

  fixTables () {
    document.querySelectorAll('.tableWrapper').forEach((tableWrapper) => {
      tableWrapper.addEventListener('scroll', () => {
        var translate = 'translate(0,' + tableWrapper.scrollTop + 'px)'
        tableWrapper.querySelector('thead').style.transform = translate
      })
    })
  }

そして、これが実際に動作する例です（私はブートストラップを使用して見栄えをよくしています）：fiddle

IEとEdgeもサポートしたい人のために、ここにスニペットがあります：

  fixTables () {
    const tableWrappers = document.querySelectorAll('.tableWrapper')
    for (let i = 0, len = tableWrappers.length; i < len; i++) {
      tableWrappers[i].addEventListener('scroll', () => {
        const translate = 'translate(0,' + tableWrappers[i].scrollTop + 'px)'
        const headers = tableWrappers[i].querySelectorAll('thead th')
        for (let i = 0, len = headers.length; i < len; i++) {
          headers[i].style.transform = translate
        }
      })
    }
  }

IEとEdgeでは、スクロールは少し遅れます...しかしそれは機能します

これは私がこれを見つけるのに役立つ答えです：答え

— ダニエル・ブジンスキー
ソース
0

私はこれらのソリューションのほとんどを試しましたが、最終的には（IMO）が最良の最新のソリューションを見つけました。

CSSグリッド

CSSグリッドを使用すると、「グリッド」を定義することができ、最終的に、固定ヘッダーとスクロール可能なコンテンツを備えたテーブル用のJavaScriptを使用しない優れたクロスブラウザーソリューションを作成できます。ヘッダーの高さは動的にすることもできます。

CSS：グリッドとして表示し、数を設定しますtemplate-rows：

.grid {
    display: grid;
    grid-template-rows: 50px auto; // For fixed height header
    grid-template-rows: auto auto; // For dynamic height header
}

HTML：グリッドコンテナーを作成し、定義された数rows：

<div class="grid">
    <div></div>
    <div></div>
</div>

これが実際の例です：

CSS

body {
  margin: 0px;
  padding: 0px;
  text-align: center;
}

.table {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 50px auto;
}
.table-heading {
  background-color: #ddd;
}
.table-content {
  overflow-x: hidden;
  overflow-y: scroll;
}

HTML

<html>
    <head>
    </head>
    <body>
        <div class="table">
            <div class="table-heading">
                HEADING
            </div>
            <div class="table-content">
                CONTENT - CONTENT - CONTENT <br/>
                CONTENT - CONTENT - CONTENT <br/>
                CONTENT - CONTENT - CONTENT <br/>
                CONTENT - CONTENT - CONTENT <br/>
                CONTENT - CONTENT - CONTENT <br/>
                CONTENT - CONTENT - CONTENT <br/>
            </div>
        </div>
    </body>
</html>
— ジェフリー・ローゼンダール
ソース
0

私はtransformation：translateを使って試しました。FirefoxとChromeでは問題なく動作しますが、IE11には機能がありません。二重スクロールバーはありません。テーブルのtfootとキャプションをサポートします。純粋なJavaScript、jQueryなし。

http://jsfiddle.net/wbLqzrfb/42/

thead.style.transform="translate(0,"+(dY-top-1)+"px)";
— ヘンリック・ハットマン
ソース
0

私はjqueryなしの解決策を見つけました

HTML

<table class="fixed_header">
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
      <th>Col 4</th>
      <th>Col 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>row 1-0</td>
      <td>row 1-1</td>
      <td>row 1-2</td>
      <td>row 1-3</td>
      <td>row 1-4</td>
    </tr>
    <tr>
      <td>row 2-0</td>
      <td>row 2-1</td>
      <td>row 2-2</td>
      <td>row 2-3</td>
      <td>row 2-4</td>
    </tr>
    <tr>
      <td>row 3-0</td>
      <td>row 3-1</td>
      <td>row 3-2</td>
      <td>row 3-3</td>
      <td>row 3-4</td>
    </tr>
    <tr>
      <td>row 4-0</td>
      <td>row 4-1</td>
      <td>row 4-2</td>
      <td>row 4-3</td>
      <td>row 4-4</td>
    </tr>
    <tr>
      <td>row 5-0</td>
      <td>row 5-1</td>
      <td>row 5-2</td>
      <td>row 5-3</td>
      <td>row 5-4</td>
    </tr>
    <tr>
      <td>row 6-0</td>
      <td>row 6-1</td>
      <td>row 6-2</td>
      <td>row 6-3</td>
      <td>row 6-4</td>
    </tr>
    <tr>
      <td>row 7-0</td>
      <td>row 7-1</td>
      <td>row 7-2</td>
      <td>row 7-3</td>
      <td>row 7-4</td>
    </tr>
  </tbody>
</table>

CSS

.fixed_header{
    width: 400px;
    table-layout: fixed;
    border-collapse: collapse;
}

.fixed_header tbody{
  display:block;
  width: 100%;
  overflow: auto;
  height: 100px;
}

.fixed_header thead tr {
   display: block;
}

.fixed_header thead {
  background: black;
  color:#fff;
}

.fixed_header th, .fixed_header td {
  padding: 5px;
  text-align: left;
  width: 200px;
}

あなたはそれがここで機能しているのを見ることができます：https： //jsfiddle.net/lexsoul/fqbsty3h

出典：https : //medium.com/@vembarrajan/html-css-tricks-scroll-able-table-body-tbody-d23182ae0fbc

— レックスソウル
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.