I'm seeking a solution to implement horizontal and vertical scroll for my table.
Currently, the horizontal scroll is working fine, but when trying to add vertical scroll, the table header also moves along with it. Is there a way to keep the table header fixed only when scrolling vertically?
.table-responsive {
max-height:200px;
overflow-x: auto !important;
overflow-y: auto !important;
}<div class="table-responsive table-striped">
<div id="tblLocationInfo_wrapper" class="dataTables_wrapper form-inline dt-bootstrap">
<table id="tblLocationInfo" class="table table-hover dataTable" role="grid" style="width: 2400px;">
<thead>
<tr role="row"></tr>
<tr role="row"></tr>
<tr role="row"></tr>
<tr role="row"></tr>
<tr role="row"></tr>
<tr role="row"></tr>
<tr role="row"></tr>
<tr role="row">
<th class="sorting" tabindex="0" aria-controls="tblLocationInfo" rowspan="1" colspan="1" aria-label="TaskType: activate to sort column ascending" style="width: 762px;">TaskType</th>
<th class="sorting" tabindex="0" aria-controls="tblLocationInfo" rowspan="1" colspan="1" aria-label="FromDate: activate to sort column ascending" style="width: 762px;">FromDate</th>
<th class="sorting" tabindex="0" aria-controls="tblLocationInfo" rowspan="1" colspan="1" aria-label="ToDate: activate to sort column ascending" style="width: 762px;">ToDate</th>
</tr>
</thead>
<tfoot>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr>
<th rowspan="1" colspan="1"><input name="Inventory" data-index="0" class="form-control js-footer-search" type="text" placeholder="Search"></th>
<th rowspan="1" colspan="1"><input name="FromDate" data-index="1" class="form-control js-footer-search" type="text" placeholder="Search"></th>
<th rowspan="1" colspan="1"><input name="ToDate" data-index="2" class="form-control js-footer-search" type="text" placeholder="Search"></th>
</tr>
</tfoot>
<tbody>
<tr role="row" class="odd">
<td>Main Location</td>
<td>02 Jul 2018 11:11:50:023</td>
<td>02 Jul 2018 11:54:13:760</td>
</tr>
<tr role="row" class="even">
<td>Main Location</td>
<td>02 Jul 2018 11:12:20:710</td>
<td>02 Jul 2018 12:13:13:867</td>
</tr>
<tr role="row" class="odd">
<td>Main Location</td>
<td>02 Jul 2018 11:13:22:083</td>
<td>02 Jul 2018 12:20:28:553</td>
</tr>
<tr role="row" class="even">
<td>InventoryLine</td>
<td>02 Jul 2018 11:50:56:527</td>
<td>02 Jul 2018 11:57:10:043</td>
</tr>
<tr role="row" class="odd">
<td>Main Location</td>
<td>02 Jul 2018 11:27:16:760</td>
<td>02 Jul 2018 12:27:40:277</td>
</tr>
<tr role="row" class="even">
<td>Main Location</td>
<td>02 Jul 2018 11:55:31:263</td>
<td>02 Jul 2018 12:33:09:467</td>
</tr>
<tr role="row" class="odd">
<td>InventoryLine</td>
<td>02 Jul 2018 12:14:14:043</td>
<td>02 Jul 2018 12:37:39:203</td>
</tr>
<tr role="row" class="even">
<td>Main Location</td>
<td>02 Jul 2018 12:23:47:223</td>
<td>02 Jul 2018 12:56:50:997</td>
</tr>
<tr role="row" class="odd">
<td>Main Location</td>
<td>02 Jul 2018 12:24:17:920</td>
<td>02 Jul 2018 13:06:17:873</td>
</tr>
<tr role="row" class="even">
<td>InventoryLine</td>
<td>02 Jul 2018 12:36:34:623</td>
<td>02 Jul 2018 13:23:59:467</td>
</tr>
</tbody>
</table>
</div>
</div>For further reference, here is the link to the solution on https://jsfiddle.net/ksyfwn5m/2/