使用 Jquery 模板在 Table 上启用水平滚动

Question

我想使用 Jquery 模板在我的 table 上启用水平滚动。

table结构（HTML）是：

<div class="col-sm-12">
                    <div class="shadow-wrapper">
                        <div class="tag-box tag-box-v1 box-shadow shadow-effect-2 km-table-container">
                            <script id="tblScriptMember" type="text/x-jquery-tmpl">
                                <tr class="pointer">
                                    <td>${MemberCode}</td>
                                    <td>${MemberName}</td>
                                    <td>${MemberCardNo}</td>
                                    <td class="text-center">{{if MemberType == 'A'}}
                                            <input type="checkbox" checked="checked" disabled="disabled">
                                        {{else}}
                                            <input type="checkbox" disabled="disabled">
                                        {{/if}}
                                    </td>
                                    <td>${MemberNIK}</td>
                                    <td>${ClientCode}</td>
                                    <td>${ClientName}</td>
                                    <td>${MemberRegistDate}</td>
                                    <td>${MemberBirthDate}</td>
                                    <td>${MemberEffStartDate}</td>
                                    <td>${MemberEffEndDate}</td>
                                    <td>${MemberModifiedDate}</td>
                                    <td>${MemberModifiedBy}</td>
                                </tr>
                            </script>
                            <table id="tblMember" class="table table-striped table-hover table-nomargin table-bordered lookup-table" style="width:1000px">
                                <thead>
                                    <tr>
                                        <th data-field-name='MemberCode' data-sort="asc" title="Sort Member Code">Member Code</th>
                                        <th data-field-name='MemberName' data-sort="asc" title="Sort Member Name">Member Name</th>
                                        <th data-field-name='MemberCardNo' data-sort="asc" title="Sort Member Card">Member Card No</th>

                                        <th data-field-name='MemberType' data-sort="asc" title="Sort Employee Status" style="width: 20px" class="text-center">Employee</th>

                                        <th data-field-name='ClientCode' data-sort="asc" title="Sort Client Code">Client Code</th>
                                        <th data-field-name='ClientName' data-sort="asc" title="Sort Client Name">Client Name</th>
                                        <th data-field-name='MemberRegistDate' data-sort="asc" title="Sort Join Date">Register Date</th>
                                        <th data-field-name='MemberBirthDate' data-sort="asc" title="Sort Member Birthdate">Birth Date</th>

                                        <th data-field-name='MemberEffStartDate' data-sort="asc" title="Sort Member Start Date">Eff Start Date</th>
                                        <th data-field-name='MemberEffEndDate' data-sort="asc" title="Sort Member End Date">Eff End Date</th>
                                        <th data-field-name='MemberModifiedDate' data-sort="asc" title="Sort Member Modified Date">Modified Date</th>
                                        <th data-field-name='MemberModifiedBy' data-sort="asc" title="Sort Member Modifier">Modified By</th>

                                    </tr>
                                </thead>
                                <tbody id="resultDataMember">
                                </tbody>
                            </table>

                </div>

如你所见运行 here.

我尝试了 following solution，使用两个包装器，但我的主显示器变得不干净且不一致，甚至我的 table 超出了我的主显示器。

你能给我推荐解决方案吗？如何使用此 table 模板执行此操作？更改我的 table 模板不是我的解决方案，因为我在此 table 模板事件中触发了另一个功能。

非常感谢@CerlinBoss

这里唯一剩下的问题是，我的页脚 div 似乎不符合我的 table 溢出样式 。

我的页脚 有一些空白 div，看看我的 firebug 组件焦点.. 正如您在此屏幕截图中所见：

Answer 1

为 shadow-wrapper

添加 overflow-y:auto

对于 space 问题，只需检查是否设置了任何 padding 或 margin。

更新：

一个 jquery 的解决方案是

$(document).ready(function(){
    $('.kamoro-table-footer').css('width',$('#tblMember').width() + "px");
})

使用 Jquery 模板在 Table 上启用水平滚动

Enabling horizontal scroll on Table using Jquery Template

javascript

jquery

html

html-table

scrollbar