Greetings everyone! I am looking to keep the thead header fixed at the top and allow only the tbody values to scroll within the table. Currently, when scrolling the page, everything in the table scrolls, but I aim to have only the tbody values scroll. Check out my Demo.
Markup
<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>
Styling
table tbody, table thead
{
display: block!important;
}
table tbody
{
overflow: auto!important;
height: 100px!important;
}
table {
width: 100%!important;
}
th
{
width: auto!important;
}
Data Example
$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"}];
});