粘桌+桌子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

回答

相关问题