Html 如何在表格中固定标题？_Html_Css_Angularjs

Html 如何在表格中固定标题？

html css angularjs

Html 如何在表格中固定标题？,html,css,angularjs,Html,Css,Angularjs,您好，我想修复（或）freezthead顶部的标题，只想在表中滚动tbody值，现在在表中滚动页面时，所有内容都会滚动，但只希望滚动tbody值 HTML <tr ng-repeat="sryarnorder in sryarnorder.colorshades"> <td>{{$index+1}}</td> <td> <input type="text" ng-model="sryarnorder.c

您好，我想修复（或）freez

thead

顶部的标题，只想在表中滚动

tbody

值，现在在表中滚动页面时，所有内容都会滚动，但只希望滚动

tbody

值

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>

数据

$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"}];
});

试试这个：

（您需要设置固定列宽）

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>

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

你可以试试sticky Header我建议你使用DIV块而不是table谢谢你宝贵的回答我们会尽快检查并更新你…如果你有时间，请更新我的plunker…谢谢我已经更新了我的plunker请在滚动页面的同时检查

thead

，也会被滚动，我期望的是，

thead

标题应该固定在顶部，

tbody

只应该滚动……谢谢，如果可能，请更新我的plunker……请先检查您的标记。有几个问题可能是它不起作用的原因。如果您不知道：不允许在

表中使用thead
，tbody
，tfoot
，tr
，td
，th
，col
，colgroup以外的任何其他元素，谢谢我知道我的标记有错误，请更新解决方案，同时更新我的plunker以了解确切的解决方案谢谢…我建议你自己试试，因为：1。我不知道你的项目是关于什么的。如果你自己不去做，你将一无所获
.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;
}