帶固定標題和動態高度的表格

我知道有很多這些問題已經回答，但不符合我的要求。我有一個未知高度和寬度的桌子，我需要，如果桌子太高，以至於需要滾動桌子，桌子的標題保持不變並按照滾動。我見過的所有解決方案都需要固定的桌面高度。我還希望滾動功能仍然可見時不可見。這可以完成，還是我需要固定的高度？帶固定標題和動態高度的表格

我的CSS至今讓我來滾動垂直和水平方向（我只需要垂直滾動），但有固定的高度和可見的滾動條：

table.sol-compare-table { 
    box-sizing: border-box; 
    overflow: hidden; 
    display: table; 
    width: 100%; 
} 
table.sol-compare-table thead, table.sol-compare-table tbody { 
    float: left; 
    width: 100%; 
} 
table.sol-compare-table tbody { 
    overflow: auto; 
    height: 150px; 
    /*overflow-x: hidden;*/ 
} 
table.sol-compare-table tr { 
    width: 100%; 
    display: table; 
    text-align: left; 
}

這裏是我的HTML：

<table class="table sol-compare-table"> 
<thead> 
    <tr> 
     <th> 
      <div> 
       <a class="sol-pdf-generator hover-gray-icon sol-share-icon" target="_blank" ng-href="#"> 
        <i class="fa fa-file-pdf-o"></i> 
        Ladda ner som PDF 
       </a> 

       <a class="sol-share-facebook hover-gray-icon sol-share-icon" onclick="#"> 
        <img src="#" alt="facebook"> 
       </a> 

       <a class="sol-share-twitter hover-gray-icon sol-share-icon" onclick="#"> 
        <img src="#" alt="twitter"><!--<i class="fa fa-twitter"></i>--> 
       </a> 

       <a class="sol-share-mail hover-gray-icon sol-share-icon" onclick="#"> 
        <i class="glyphicon glyphicon-envelope"></i> 
       </a> 
      </div> 
       <h2 class="sol-compare-heading">Allmän Information<h2> 
     </th> 

     <th ng-repeat="unit in units" class="sol-compare-heading"> 
      <div> 
       <a href="#/unitDetail/{{unit.Id}}"> 
        <img class="detail-main-image" ng-if="getImageOfUnit(unit).Value.Id" ng-src="#"></img> 
       </a> 
      </div> 
       <a href="#"></a> 
     </th> 
      </tr> 
     </thead> 
     <tbody>    
      <tr ng-repeat="#"> 
       <td>Name</td> 
       <td ng-repeat="unit in units"> 
         <span ng-if="unitAttr.Value != null"> 
          <span print-attribute="#"></span> 
         </span> 
         <span ng-repeat="#" ng-if="unitAttr.Values"> 
          # 
         </span> 
         <span ng-if="# == null && unitAttr.Values == null"> 
          - 
         </span> 
       </td> 
      </tr> 
     </tbody> 
</table>

EDIT

我試圖與使用位置是：固定在表頭和第幾乎完成了我之後的工作，只是它應該在任何時候都固定在頁面的頂部（當向下滾動它應該跟隨滾動，但瀏覽器窗口中的位置相同）。這JSfiddle是最簡單的方式來顯示我在atm atm我猜; http://jsfiddle.net/rwqkokgy/5/

來源

2015-07-20 Jonathan Lind