引导代码来修复表头 [英] bootstrap code to fix table header
本文介绍了引导代码来修复表头的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用bootstrap处理前端应用程序。我有一个包含数据的表，我想修复表头，如果内容更多，只有滚动条应该出现在内容附近，只有内容应该滚动并且标题应该固定，如链接此处
我的代码示例：此处
以下是我的代码：
。 header-fixed {width：100％} .table-fixed thead {} .table-fixed tbody {height：1220px; width：100％;}
< link rel = stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css>< div> < div class =modal-body> < div class =row> < div class =style =width：80％; margin：0px auto> < table class =table table-bordered header-fixedstyle =border：1px> < THEAD> < tr style =background-color：＃cdd0d6;> < th style =white-space：wrap; text-align：center;> ID< / th> < th style =white-space：nowrap; text-align：center;>描述< / th> < th style =white-space：wrap; text-align：center;> DoorNum< / th> < th style =white-space：wrap; text-align：center;>名字< / th> < th style =white-space：wrap; text-align：center;>订购商品的数量< / th> < th style =white-space：wrap; text-align：center;> Desc Comments< / th> < / TR> < / THEAD> < TBODY> < tr ng-repeat =blocked inTestCaseDetails中的数据> < td style =text-align：center;> 10< / td> < td style =text-align：center;>在odered日期< / td>的一周之后，项目属于Navvy modal 2014WE belomgs到用户名JOE dispathched。 < td style =text-align：center;> 798< / td> < td style =text-align：center;> Joe< / td> < td style =text-align：center;> 4< / td> < td style =text-align：center;>已分配订单< / td> < / TR> < tr ng-repeat =blocked inTestCaseDetails中的数据> < td style =text-align：center;> 20< / td> < td style =text-align：center;>商品属于xyz modal 2013E< / td> < td style =text-align：center;>< / td> < td style =text-align：center;>< / td> < td style =text-align：center;>< / td> < td style =text-align：center;>尚未排序< / td> < / TR> < tr ng-repeat =blocked inTestCaseDetails中的数据> < td style =text-align：center;> 30< / td> < td style =text-align：center;>商品属于ABC模式2017WE< / td> < td style =text-align：center;> 99< / td> < td style =text-align：center;> ABC< / td> < td style =text-align：center;>< / td> < td style =text-align：center;>< / td> < / TR> < tr ng-repeat =blocked inTestCaseDetails中的数据> < td style =text-align：center;> 10< / td> < td style =text-align：center;>在odered日期< / td>的一周之后，项目属于Navvy modal 2014WE belomgs到用户名JOE dispathched。 < td style =text-align：center;> 798< / td> < td style =text-align：center;> Joe< / td> < td style =text-align：center;> 4< / td> < td style =text-align：center;>已分配订单< / td> < / TR> < tr ng-repeat =blocked inTestCaseDetails中的数据> < td style =text-align：center;> 20< / td> < td style =text-align：center;>商品属于xyz modal 2013E< / td> < td style =text-align：center;>< / td> < td style =text-align：center;>< / td> < td style =text-align：center;>< / td> < td style =text-align：center;>尚未排序< / td> < / TR> < tr ng-repeat =blocked inTestCaseDetails中的数据> < td style =text-align：center;> 30< / td> < td style =text-align：center;>商品属于ABC模式2017WE< / td> < td style =text-align：center;> 99< / td> < td style =text-align：center;> ABC< / td> < td style =text-align：center;>< / td> < td style =text-align：center;>< / td> < / TR> < tr ng-repeat =blocked inTestCaseDetails中的数据> < td style =text-align：center;> 10< / td> < td style =text-align：center;>在odered日期< / td>的一周之后，项目属于Navvy modal 2014WE belomgs到用户名JOE dispathched。 < td style =text-align：center;> 798< / td> < td style =text-align：center;> Joe< / td> < td style =text-align：center;> 4< / td> < td style =text-align：center;>已分配订单< / td> < / TR> < tr ng-repeat =blocked inTestCaseDetails中的数据> < td style =text-align：center;> 20< / td> < td style =text-align：center;>商品属于xyz modal 2013E< / td> < td style =text-align：center;>< / td> < td style =text-align：center;>< / td> < td style =text-align：center;>< / td> < td style =text-align：center;>尚未排序< / td> < / TR> < tr ng-repeat =blocked inTestCaseDetails中的数据> < td style =text-align：center;> 30< / td> < td style =text-align：center;>商品属于ABC模式2017WE< / td> < td style =text-align：center;> 99< / td> < td style =text-align：center;> ABC< / td> < td style =text-align：center;>< / td> < td style =text-align：center;>< / td> < / TR> < tr ng-repeat =blocked inTestCaseDetails中的数据> < td style =text-align：center;> 10< / td> < td style =text-align：center;>在odered日期< / td>的一周之后，项目属于Navvy modal 2014WE belomgs到用户名JOE dispathched。 < td style =text-align：center;> 798< / td> < td style =text-align：center;> Joe< / td> < td style =text-align：center;> 4< / td> < td style =text-align：center;>已分配订单< / td> < / TR> < tr ng-repeat =blocked inTestCaseDetails中的数据> < td style =text-align：center;> 20< / td> < td style =text-align：center;>商品属于xyz modal 2013E< / td> < td style =text-align：center;>< / td> < td style =text-align：center;>< / td> < td style =text-align：center;>< / td> < td style =text-align：center;>尚未排序< / td> < / TR> < tr ng-repeat =blocked inTestCaseDetails中的数据> < td style =text-align：center;> 30< / td> < td style =text-align：center;>商品属于ABC模式2017WE< / td> < td style =text-align：center;> 99< / td> < td style =text-align：center;> ABC< / td> < td style =text-align：center;>< / td> < td style =text-align：center;>< / td> < / TR> < / tbody的> < /表> < / DIV> < / DIV> < / div>< / div>>
有关如何修复标题的建议，并使用bootstrap / css仅滚动正文内容。我尝试如上所示，但没有按预期工作。
解决方案
您可以在导航栏中执行style = position：fixed 然后导航栏将保持原状，并且内容将仅滚动。
I am working on front-end application using bootstrap.I have a table with data, i want to fix the header of the table and if the contents are more only the scrollbar should appear near content and only the content should be scrolled and the header should be fixed as shown in the link here
Example plunker of my code: here
Below is my code:
.header-fixed {
width: 100%
}
.table-fixed thead {
}
.table-fixed tbody {
height: 1220px;
width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div>
<div class="modal-body">
<div class="row">
<div class="" style="width: 80%; margin: 0px auto">
<table class="table table-bordered header-fixed" style="border :1px">
<thead>
<tr style="background-color: #cdd0d6;">
<th style="white-space: wrap;text-align: center;">ID</th>
<th style="white-space: nowrap;text-align: center;">Description</th>
<th style="white-space: wrap;text-align: center;">DoorNum</th>
<th style="white-space: wrap;text-align: center;">First Name</th>
<th style="white-space: wrap;text-align: center;">Num of ordered items</th>
<th style="white-space: wrap;text-align: center;">Desc Comments</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in blockedTestCaseDetails">
<td style="text-align: center;">10</td>
<td style="text-align: center; ">Item belongs to Navvy modal 2014WE belomgs to the user name JOE dispathched after one week of odered date</td>
<td style="text-align: center; ">798</td>
<td style="text-align: center; ">Joe</td>
<td style="text-align: center; ">4</td>
<td style="text-align: center; ">Order dispatched</td>
</tr>
<tr ng-repeat="data in blockedTestCaseDetails">
<td style="text-align: center;">20</td>
<td style="text-align: center; ">Item belongs to xyz modal 2013E</td>
<td style="text-align: center; "></td>
<td style="text-align: center; "></td>
<td style="text-align: center; "></td>
<td style="text-align: center; ">Not yet Ordered</td>
</tr>
<tr ng-repeat="data in blockedTestCaseDetails">
<td style="text-align: center;">30</td>
<td style="text-align: center; ">Item belongs to ABC modal 2017WE</td>
<td style="text-align: center; ">99</td>
<td style="text-align: center; ">ABC</td>
<td style="text-align: center; "></td>
<td style="text-align: center; "></td>
</tr>
<tr ng-repeat="data in blockedTestCaseDetails">
<td style="text-align: center;">10</td>
<td style="text-align: center; ">Item belongs to Navvy modal 2014WE belomgs to the user name JOE dispathched after one week of odered date</td>
<td style="text-align: center; ">798</td>
<td style="text-align: center; ">Joe</td>
<td style="text-align: center; ">4</td>
<td style="text-align: center; ">Order dispatched</td>
</tr>
<tr ng-repeat="data in blockedTestCaseDetails">
<td style="text-align: center;">20</td>
<td style="text-align: center; ">Item belongs to xyz modal 2013E</td>
<td style="text-align: center; "></td>
<td style="text-align: center; "></td>
<td style="text-align: center; "></td>
<td style="text-align: center; ">Not yet Ordered</td>
</tr>
<tr ng-repeat="data in blockedTestCaseDetails">
<td style="text-align: center;">30</td>
<td style="text-align: center; ">Item belongs to ABC modal 2017WE</td>
<td style="text-align: center; ">99</td>
<td style="text-align: center; ">ABC</td>
<td style="text-align: center; "></td>
<td style="text-align: center; "></td>
</tr>
<tr ng-repeat="data in blockedTestCaseDetails">
<td style="text-align: center;">10</td>
<td style="text-align: center; ">Item belongs to Navvy modal 2014WE belomgs to the user name JOE dispathched after one week of odered date</td>
<td style="text-align: center; ">798</td>
<td style="text-align: center; ">Joe</td>
<td style="text-align: center; ">4</td>
<td style="text-align: center; ">Order dispatched</td>
</tr>
<tr ng-repeat="data in blockedTestCaseDetails">
<td style="text-align: center;">20</td>
<td style="text-align: center; ">Item belongs to xyz modal 2013E</td>
<td style="text-align: center; "></td>
<td style="text-align: center; "></td>
<td style="text-align: center; "></td>
<td style="text-align: center; ">Not yet Ordered</td>
</tr>
<tr ng-repeat="data in blockedTestCaseDetails">
<td style="text-align: center;">30</td>
<td style="text-align: center; ">Item belongs to ABC modal 2017WE</td>
<td style="text-align: center; ">99</td>
<td style="text-align: center; ">ABC</td>
<td style="text-align: center; "></td>
<td style="text-align: center; "></td>
</tr>
<tr ng-repeat="data in blockedTestCaseDetails">
<td style="text-align: center;">10</td>
<td style="text-align: center; ">Item belongs to Navvy modal 2014WE belomgs to the user name JOE dispathched after one week of odered date</td>
<td style="text-align: center; ">798</td>
<td style="text-align: center; ">Joe</td>
<td style="text-align: center; ">4</td>
<td style="text-align: center; ">Order dispatched</td>
</tr>
<tr ng-repeat="data in blockedTestCaseDetails">
<td style="text-align: center;">20</td>
<td style="text-align: center; ">Item belongs to xyz modal 2013E</td>
<td style="text-align: center; "></td>
<td style="text-align: center; "></td>
<td style="text-align: center; "></td>
<td style="text-align: center; ">Not yet Ordered</td>
</tr>
<tr ng-repeat="data in blockedTestCaseDetails">
<td style="text-align: center;">30</td>
<td style="text-align: center; ">Item belongs to ABC modal 2017WE</td>
<td style="text-align: center; ">99</td>
<td style="text-align: center; ">ABC</td>
<td style="text-align: center; "></td>
<td style="text-align: center; "></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>>
Any suggestions on how to fix the header and scroll only the body content using bootstrap/css. I tried as shown above but was not working as expected..
解决方案
You can do in the navbar "style=position:fixed" and then the navbar will stay where it is and the content will be scrolled only.
这篇关于引导代码来修复表头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
