如何在表中修复标题？

Question

大家好，我想修复（或）freez thead标题顶部，并希望滚动tbody值只在表中，现在在表中滚动页面时，一切都滚动，但期望滚动只有tbody值... My Demo

HTML

<tr ng-repeat="sryarnorder in sryarnorder.colorshades"> 
     <td>{{$index+1}}</td> 
      <td> <input type="text" ng-model="sryarnorder.color" style="display:none;"> 
        <div style="text-align:center;" ng-repeat="dyedyarnreferencenumber in dyedyarnreferencenumbers | filter:sryarnorder.color"> 
      <p>{{dyedyarnreferencenumber.shade}}</p> 
     </div> </td> 
      <td> <input type="text" ng-model="sryarnorder.color" style="display:none;"> 
       <div style="text-align:center;" ng-repeat="dyedyarnreferencenumber in dyedyarnreferencenumbers | filter:sryarnorder.color"> 
      <p>{{dyedyarnreferencenumber.buyers_reference}}</p> 
     </div> </td> 
      <td> <input type="text" ng-model="sryarnorder.color" style="display:none;"> 
        <div style="text-align:center;" ng-repeat="dyedyarnreferencenumber in dyedyarnreferencenumbers | filter:sryarnorder.color"> 
      <p>{{dyedyarnreferencenumber.approved_supplier_ref}}</p> 
     </div> </td> 
      <td> <input type="text" ng-model="sryarnorder.color" style="display:none;"> 
        <div style="text-align:center;" ng-repeat="dyedyarnreferencenumber in dyedyarnreferencenumbers | filter:sryarnorder.color"> 
      <p>{{dyedyarnreferencenumber.category}}</p> 
     </div> </td> 
      <td> <input type="text" ng-model="sryarnorder.color" style="display:none;"> 

      <p>{{sryarnorder.order_quantity}} {{sryarnorder.order_quantity_unit}}</p> 
     </div> </td> 
      <td> <input type="text" ng-model="sryarnorder.color" style="display:none;"> 

      <p>{{sryarnorder.price_per_kg_currency}} {{sryarnorder.price_per_kg}}</p> 
     </div> </td> 
      <td> <input type="text" ng-model="sryarnorder.color" style="display:none;"> 

      <p>{{sryarnorder.order_quantity * sryarnorder.price_per_kg}}</p> 
     </div> </td> 
    </tr> 

CSS

table tbody, table thead 
{ 
    display: block!important; 
} 

table tbody 
{ 
    overflow: auto!important; 
    height: 100px!important; 
} 

table { 
    width: 100%!important; 
} 
th 
{ 
    width: auto!important; 
} 

数据

$scope.sryarnorders = [{"_id":"573d7fa0760ba711126d7de5","user":{"_id":"5721a378d33c0d6b0bb30416","displayName":"ms ms"},"__v":1,"colorshades":[{"_id":"573d7fc3760ba711126d7de6","price_per_kg_currency":"Inr","price_per_kg":"2","order_quantity_unit":"kg","order_quantity":"23","color":"56ffc46dab97a73d1066b792","quality":"Home Textiles","count":"yarn count"}],"created":"2016-05-19T08:56:00.997Z","remarks":"approved","actual_delivery_date":"2016-05-19","ex_india_date":"2016-05-19","ex_factory_date":"2016-05-19","lc_details_date":"2016-05-19","lc_details":"tooo much","po_delivery_date":"2016-05-19","sales_contract_date":"2016-05-19","sales_contract":"bioler","purchase_order_no_date":"2016-05-19","purchase_order_no":"1234","supplier_name":"Fsa","buyer_name":"e21"},{"_id":"56ffc6d5ab97a73d1066b798","user":{"_id":"56ff7bece2b9a1d10cd074a3","displayName":"saravana kumar"},"__v":1,"colorshades":[{"_id":"56ffc723ab97a73d1066b799","price_per_kg_currency":"Inr","price_per_kg":"120","order_quantity_unit":"kg","order_quantity":"25","color":"56ffc46dab97a73d1066b792","quality":"Home Textiles","count":"yarn count"}],"created":"2016-04-02T13:19:17.746Z","remarks":"pending","actual_delivery_date":"2016-04-02","ex_india_date":"2016-04-04","ex_factory_date":"2016-04-02","lc_details_date":"2016-04-02","lc_details":"lc","po_delivery_date":"2016-04-02","sales_contract_date":"2016-04-02","sales_contract":"required","purchase_order_no_date":"2016-04-02","purchase_order_no":"125","supplier_name":"Fsa","buyer_name":"Binary hand"},{"_id":"56ffc5e0ab97a73d1066b796","user":{"_id":"56ff7bece2b9a1d10cd074a3","displayName":"saravana kumar"},"__v":1,"colorshades":[{"_id":"56ffc608ab97a73d1066b797","price_per_kg_currency":"usd","price_per_kg":"5","order_quantity_unit":"kg","order_quantity":"20","color":"56ffc46dab97a73d1066b792","quality":"yarn quality","count":"yarn count"}],"created":"2016-04-02T13:15:12.876Z","remarks":"clear","actual_delivery_date":"2016-04-02","ex_india_date":"2016-04-02","ex_factory_date":"2016-04-02","lc_details_date":"2016-04-02","lc_details":"free","po_delivery_date":"2016-04-02","sales_contract_date":"2016-04-02","sales_contract":"required","purchase_order_no_date":"2016-04-02","purchase_order_no":"12345","supplier_name":"Fsa","buyer_name":"e21"}]; 
}); 

Answer 1

试试这个：https://codepen.io/tjvantoll/pen/JEKIu

（您需要设置固定列宽）

HTML：

<table class="fixed_headers"> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>Color</th> 
      <th>Description</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Apple</td> 
      <td>Red</td> 
      <td>These are red.</td> 
     </tr> 
     <!-- more stuff --> 
    </tbody> 
</table> 

CSS：

.fixed_headers { 
    width: 750px; 
    table-layout: fixed; 
    border-collapse: collapse; 
} 
.fixed_headers th { 
    text-decoration: underline; 
} 
.fixed_headers th, 
.fixed_headers td { 
    padding: 5px; 
    text-align: left; 
} 
.fixed_headers td:nth-child(1), 
.fixed_headers th:nth-child(1) { 
    min-width: 200px; 
} 
.fixed_headers td:nth-child(2), 
.fixed_headers th:nth-child(2) { 
    min-width: 200px; 
} 
.fixed_headers td:nth-child(3), 
.fixed_headers th:nth-child(3) { 
    width: 350px; 
} 
.fixed_headers thead { 
    background-color: #333; 
    color: #FDFDFD; 
} 
.fixed_headers thead tr { 
    display: block; 
    position: relative; 
} 
.fixed_headers tbody { 
    display: block; 
    overflow: auto; 
    width: 100%; 
    height: 300px; 
} 
.fixed_headers tbody tr:nth-child(even) { 
    background-color: #DDD; 
} 
.old_ie_wrapper { 
    height: 300px; 
    width: 750px; 
    overflow-x: hidden; 
    overflow-y: auto; 
} 
.old_ie_wrapper tbody { 
    height: auto; 
}