tbody垂直滚动粘滞列

Question

我有一个粘滞列的表（见下面的jsfiddle）。但我试着在桌体上放一个垂直滚动条，这样标题总是可见的，而tbody的高度应该是固定的。我怎样才能做到这一点？

 body { 
 
      font: 16px Calibri; 
 
     } 
 
     
 
     table { 
 
      border-collapse: separate; 
 
      border-top: 3px solid grey; 
 
     } 
 
     
 
     td,th { 
 
      margin: 0; 
 
      border: 3px solid grey; 
 
      border-top-width: 0px; 
 
      white-space: nowrap; 
 
     } 
 
     
 
     div { 
 
      width: 600px; 
 
      overflow-x: scroll; 
 
      margin-left: 5em; 
 
      overflow-y: visible; 
 
      padding-bottom: 1px; 
 
     } 
 
     
 
     .headcol { 
 
      position: absolute; 
 
      width: 5em; 
 
      left: 0; 
 
      top: auto; 
 
      border-right: 0px none black; 
 
      border-top-width: 3px; 
 
      /*only relevant for first row*/ 
 
      margin-top: -3px; 
 
      /*compensate for top border*/ 
 
     } 
 
     
 
     .long { 
 
      background: yellow; 
 
      letter-spacing: 1em; 
 
     }

<div> 
 
    <table> 
 
    <thead> 
 
     <tr> 
 
     <th class="headcol">sticky col</th> 
 
     <th>col2</th> 
 
     <th>col3</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td class="headcol">1</td> 
 
     <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="headcol">2</td> 
 
     <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="headcol">3</td> 
 
     <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="headcol">4</td> 
 
     <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="headcol">5</td> 
 
     <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="headcol">6</td> 
 
     <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="headcol">7</td> 
 
     <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="headcol">8</td> 
 
     <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="headcol">9</td> 
 
     <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

最终的结果应该与此类似： http://demos.telerik.com/kendo-ui/grid/frozen-columns

Answer 1

您需要设置为固定的，你想垂直滚动时保持固定的单元格的位置。

.headcol { 
position:fixed; 
}