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

Question

我想使用Jquery Template在我的桌子上启用水平滚动。

表结构（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，但我的主显示器变得不干净且不一致，即使我的桌子超出了我的主显示器。

您会向我推荐解决方案吗？我如何使用此表格模板执行此操作？更改我的表模板不是我的解决方案，因为我在此表模板事件中触发了另一个函数。

非常感谢@CerlinBoss

这里唯一的问题是，我的页脚div似乎没有遵循我的表格溢出样式。

我的页脚div上有一些空白区域，看看我的firebug组件焦点.. 正如你在这个屏幕截图中看到的那样：

Answer 1

为overflow-y:auto

添加shadow-wrapper

对于空间问题，只需检查是否设置了padding或margin。

更新：

jquery解决方案

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