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