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

尝试将固定属性添加到您的th元素

HTML：

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

CSS：

#header-fixed {
    position: fixed;

}

Answer 2

如果您使用的是dataTable，则它具有内置的修复标头。将解决您的问题

$（'＃example'）。DataTable（{ fixedHeader：true}）;

将垂直滚动条添加到带有固定thead的tbody进行垂直滚动

2 个答案: