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