Question

我目前在ASP.Net MVC应用程序中使用JQuery插件DataTables。出于某种原因，当我尝试使用DataTable的scrollX选项并将其设置为true时，水平滚动条将部分覆盖最后一行信息。这有点烦人。有谁知道如何解决这个问题。我被告知这是这个插件的一个常见问题，但似乎无法在网上找到与此相关的任何内容。

以下是一些示例代码。出于安全原因，我将不得不使用一些通用名称：

HTML

<div class="panel-body" style="padding-top: 12px;" overflow-y:hidden">

        <table id="example" style="width:100%;" class="table" cellspacing="0">
            <thead style="width:100%">
                <tr role="row">
                    <th>Column#</th>
                    <th>Column#</th>
                    <th>Column#</th>
                    <th>Column#</th>
                    <th>Column#</th>
                    <th>Column#</th>
                    <th>Column#</th>
                    <th>Column#</th>
                    <th>Column#</th>
                    <th>Column#</th>
                    <th>Column#</th>
                    <th>Column#</th>
                    <th>Column#</th>
                    <th>Column#</th>
                    <th>Column#</th>
                    <th>Column#</th>
                    <th>Column#</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
<script>
    var table1 = $('#example').DataTable({
         "scrollX": true, 
         dom: "Bfrtip", 
         "buttons": [], 
         "processing": true, 
         "serverSide": true, "ajax": {"url": "/Home/MyAction", 
                  "type": "POST", 
                  "data": function (d) { modD(d);}}
    });
</script>

任何建议都会非常感谢！

Answer 1

所以我实际上弄清楚了问题是什么，或者至少找到了我的特定问题的解决方案。在我的帖子中注意到我只使用了Bootstrap＆＃34; table＆＃34;一旦我添加＆＃34;表格响应＆＃34;这似乎解决了这个问题。不知道为什么修复它但是没有抱怨这里。希望这可以帮助其他人遇到同样的问题。

以下是编辑的代码：

<div class="panel-body" style="padding-top: 12px;" overflow-y:hidden">

    <table id="example" style="width:100%;" class="table table-responsive" cellspacing="0">
        <thead style="width:100%">
            <tr role="row">
                <th>Column#</th>
                <th>Column#</th>
                <th>Column#</th>
                <th>Column#</th>
                <th>Column#</th>
                <th>Column#</th>
                <th>Column#</th>
                <th>Column#</th>
                <th>Column#</th>
                <th>Column#</th>
                <th>Column#</th>
                <th>Column#</th>
                <th>Column#</th>
                <th>Column#</th>
                <th>Column#</th>
                <th>Column#</th>
                <th>Column#</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>
<script>
     var table1 = $('#example').DataTable({
         "scrollX": true, 
         dom: "Bfrtip", 
         "buttons": [], 
         "processing": true, 
         "serverSide": true, 
         "ajax": {"url": "/Home/MyAction", 
             "type": "POST", 
             "data": function (d) { modD(d);}}
     });
</script>

DataTables - 水平滚动条部分覆盖最后一行

1 个答案: