粘桌+桌子thead

我有這個代碼，我需要粘和.tab2只是粘滯thead。我將使用它來獲取更多的表格，因此我需要一點響應式代碼，並且如果它可以靈活（調整大小）寬度。粘桌+桌子thead

我嘗試了一些代碼，但他們沒有響應代碼，靈活的寬度或代碼比他必須要更難，我想。

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

什麼想法？

來源

2017-02-10 liop7410

你的意思是固定的頭？ – Yuri

例如.. https://codepen.io/_codemics/pen/PwEbYJ但條件如上。 – liop7410

令人難以置信的css sticky最適合顯示內容：block。你可以用一小片的jQuery的解決這個問題，就像這樣：

$(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>

來源

2018-01-06 18:56:14

粘桌+桌子thead

回答

相關問題