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

如何在表中修复标题？

1 个答案: