スティッキーテーブル+テーブルthead

Question

私はこのコードを持っており、私は粘着性が必要です.tab1と.tab2のためだけに粘着性thead。私はもっ​​と多くのテーブルのためにそれを使用するつもりですので、私は少し応答性の高いコードが必要とし、それが可能な柔軟性（サイズ変更）幅があれば。

私はいくつかのコードを試しましたが、応答性の高いコードではなく、柔軟な幅やコードが難しくなっていました。

JSFiddle

<div> 
Header 
</div> 
<table class="tab1"> 
    <tr> 
     <td>NAME</td> 
     <td> 
     <input type="text" size='20'> 
      <input class="button" type="submit" name="button" value="search"> 
     </td> 
    </tr> 
</table> 

<table class="tab2"> 
    <thead> 
     <tr> 
      <th>one</th> 
      <th>two</th> 
      <th>three</th> 
      <th>four</th> 
      <th>five</th> 
      <th>six</th> 
      <th>seven</th> 
     </tr> 
    </thead> 
    <tr> 
     <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td> 
    </tr><tr> 
     <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td> 
    </tr><tr> 
     <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td> 
    </tr><tr> 
     <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td> 
    </tr><tr> 
     <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td> 
    </tr><tr> 
     <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td> 
    </tr><tr> 
     <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td> 
    </tr><tr> 
     <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td> 
    </tr><tr> 
     <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td> 
    </tr><tr> 
     <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td> 
    </tr><tr> 
     <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td> 
    </tr><tr> 
     <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td> 
    </tr><tr> 
     <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td> 
    </tr><tr> 
     <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td> 
    </tr><tr> 
     <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td> 
    </tr> 

</table> 

任意のアイデアはありますか？

Answer 1

素晴らしいCSSスティッキーは、表示：ブロック付きのもので最も効果的です。

$(function() { 
 

 
$('table, td, th, thead').width(function() { \t 
 
    return $(this).width(); 
 
}); 
 

 
$('td, th, table, thead').height(function() { \t 
 
    return $(this).height(); 
 
}); 
 

 
$('table, thead').css('display','block') 
 

 
});

table{width:100%;} 
 
div{padding:100px;} 
 
tr:nth-child(even) {background: #CCC} 
 
tr:nth-child(odd) {background: #FFF} 
 

 
.tab1 { 
 
position: sticky; 
 
top: 0px;} 
 

 
.tab2 thead { 
 
position: sticky; 
 
top: 20px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
Header 
 
</div> 
 
<table class="tab1"> 
 
\t <tr> 
 
\t \t <td>BAR</td> 
 
\t \t <td> 
 
     <input name='bar' type="text" readonly="readonly" size='20'> 
 
    </td> 
 
\t \t <td>NAME</td> 
 
\t \t <td> 
 
     <input type="text" size='20'> 
 
\t \t <input class="button" type="submit" name="button" value="search"> 
 
\t \t </td> 
 
\t </tr> 
 
</table> 
 

 
<table class="tab2"> 
 
\t <thead> 
 
\t \t <tr> 
 
\t \t \t <th>one</th> 
 
\t \t \t <th>two</th> 
 
\t \t \t <th>three</th> 
 
\t \t \t <th>four</th> 
 
\t \t \t <th>five</th> 
 
\t \t \t <th>six</th> 
 
\t \t \t <th>seven</th> 
 
\t \t </tr> 
 
\t </thead> 
 
\t <tr> 
 
\t <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td> 
 
\t </tr><tr> 
 
\t <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td> 
 
\t </tr><tr> 
 
\t <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td> 
 
\t </tr><tr> 
 
\t <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td> 
 
\t </tr><tr> 
 
\t <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td> 
 
\t </tr><tr> 
 
\t <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td> 
 
\t </tr><tr> 
 
\t <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td> 
 
\t </tr><tr> 
 
\t <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td> 
 
\t </tr><tr> 
 
\t <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td> 
 
\t </tr><tr> 
 
\t <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td> 
 
\t </tr><tr> 
 
\t <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td> 
 
\t </tr><tr> 
 
\t <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td> 
 
\t </tr><tr> 
 
\t <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td> 
 
\t </tr><tr> 
 
\t <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td> 
 
\t </tr><tr> 
 
\t <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td> 
 
\t </tr> 
 

 
</table><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>