粘性 table + table thead

Question

我有这段代码，我需要粘性 .tab1，对于 .tab2，我只需要粘性 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>

有什么想法吗？

Answer 1

神奇的 css 便签贴在带有 display: block 的东西上效果最好。你可以用一小块 jquery 来解决这个问题，像这样：

$(function() {

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

$('td, th, table, thead').height(function() { 
    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">
 <tr>
  <td>BAR</td>
  <td>
      <input name='bar' type="text" readonly="readonly" size='20'>
    </td>
  <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><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>

粘性 table + table thead

Sticky table + table thead

html

jquery

html-table

sticky