ブートストラップの固定テーブルヘッダー行

Question

ヘッダー行を常に表示する必要があります。追加位置：先頭行に固定されたCSSです。しかし、2つの問題に直面する：

1. 最初のヘッダー行は本文の最初の行に表示されます。
2. 最初のヘッダー行の本文行の幅が同じではありません。

リアルプロジェクトテーブルには25個の列があり、ブートストラップが含まれています。

<table class="table table-bordered table-fixed"> 
<thead> 
    <tr> 
    <th>Firstname</th> 
    <th>Lastname</th> 
    <th>Email</th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
    <td>John</td> 
    <td>Doe</td> 
    <td>john@example.com</td> 
    </tr> 
    <tr> 
    <td>Mary</td> 
    <td>Moe</td> 
    <td>mary@example.com</td> 
    </tr> 
</table> 

この問題のためにCSS

table thead tr{position:fixed;} 

https://jsfiddle.net/anieshjoseph/rrbsk9eq/

Answer 1

ガットstackoverflow answer。

<div id="table-container"> 
    <table class="table table-bordered table-fixed" id="maintable"> 
    <thead> 
     <tr> 
     <th>Firstname</th> 
     <th>Lastname</th> 
     <th>Email</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <td>John</td> 
     <td>Doe</td> 
     <td>john@example.com</td> 
     </tr> 
     <tr> 
     <td>Mary</td> 
     <td>Moe</td> 
     <td>mary@example.com</td> 
     </tr> 
     <tr> 
    </tbody> 
    </table> 
    <div id="bottom_anchor"></div> 
</div> 

次のCSSです：

thead{ 
    background-color:white; 
} 
#maintable{width: 100%} 

これは、テーブルに基づいて、いくつかのJavaScriptコード、そのコンテナ&底のdivを必要とします。

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); 

JSFiddle Link