Add vertical scroll bar to tbody with fixed thead for vertical scroll

Question

I have a table to which I want to add horizontal and vertical scroll.

This is working fine with horizontal scroll, but with vertical scroll, the table header also moves.

How to keep the table header fixed only for vertical scroll .

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

Here is the https://jsfiddle.net/ksyfwn5m/2/

Possible duplicate of [Table header to stay fixed at the top when user scrolls it out of view with jQuery](https://stackoverflow.com/questions/4709390/table-header-to-stay-fixed-at-the-top-when-user-scrolls-it-out-of-view-with-jque) — Muhammad Osama, Aug 28 '18 at 07:49

score 1 · Answer 1 · answered Aug 28 '18 at 08:21

1

try adding the fixed property to your th element

HTML:

<thead id="header-fixed"></thead>

CSS:

#header-fixed {
    position: fixed;

}

answered Aug 28 '18 at 08:21

Matt.S

287
4
20

score 1 · Answer 2 · answered Aug 28 '18 at 12:39

1

if you are using dataTable then it has inbuild fix header thing. Will fix your problem

$('#example').DataTable( { fixedHeader: true } );

answered Aug 28 '18 at 12:39

Subodh Sharma

303
3
9

Add vertical scroll bar to tbody with fixed thead for vertical scroll

2 Answers2