带固定标题和动态高度的表格

我知道有很多这些问题已经回答，但不符合我的要求。我有一个未知高度和宽度的桌子，我需要，如果桌子太高，以至于需要滚动桌子，桌子的标题保持不变并按照滚动。我见过的所有解决方案都需要固定的桌面高度。我还希望滚动功能仍然可见时不可见。这可以完成，还是我需要固定的高度？带固定标题和动态高度的表格

我的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