How to fixed header with in table?

Question

Hi all I want to fix (or) freez thead header on top and want to scroll tbody values only in table, as of now in table while scroll the page everything gets scrolled, but expecting to scroll only the tbody values ... 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;
}

Data

$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

Try this: https://codepen.io/tjvantoll/pen/JEKIu

(you need to set fixed column widths)

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