Добавить вертикальную полосу прокрутки к телу с фиксированной thead для вертикальной прокрутки

Question

У меня есть таблица, к которой я хочу добавить горизонтальную и вертикальную прокрутку.

Это нормально работает с горизонтальной прокруткой, но с вертикальной прокруткой заголовок таблицы также перемещается.

Как сохранить фиксированный заголовок таблицы только для вертикальной прокрутки.

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

Вот это https://jsfiddle.net/ksyfwn5m/2/

Answer 1

если вы используете dataTable, то он имеет встроенный заголовок fix fix. Будет исправить вашу проблему

$ ('# пример'). DataTable ({ fixedHeader: true});

Answer 2

попробуйте добавить фиксированное свойство к вашему элементу th

HTML:

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

CSS:

#header-fixed {
    position: fixed;

}