0
我正在使用bootstrap.I有一個表的數據表，我想修復表頭，如果內容更多隻有滾動條應該出現在內容附近和前端應用程序只有內容應該滾動和報頭應該是固定的，如圖中的鏈接的我的代碼here自舉代碼修復表頭
例plunker：here
下面是我的代碼：
.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>>有關如何修復標題和僅使用bootstrap/css滾動正文內容的任何建議。我嘗試如上所示，但沒有按預期工作。
可能重複的[HTML表與固定標頭？]（https://stackoverflow.com/questions/673153/html-table-with-fixed-headers） – jfeferman