水平滚动数据表格 dataTables.js

Question

我在使用 dataTables.js 时遇到了横向滚动条无法正常工作的问题。期望的结果是在表格内可以水平滚动，但实际上表格会超出容器 div 的范围。是否有解决方法？

HTML：

<div class="box-body table-responsive">
     <table id="portal-drivers" class="table table-bordered table-striped" cellspacing="0" width="100%">
         <thead>
             <tr>
                 <th>First Name</th>
                 <th>Last Name</th>
                 <th>Email</th>
                 <th>Number</th>
                 <th>Rating</th>
                 <th>Transactions</th>
             </tr>
         </thead>
         <tbody>
             <tr>
                 <td>Bugs</td>
                 <td>Bunny</td>
                 <td>[e-mail]</td>
                 <td>[phone]</td>
                 <td>4.8</td>
                 <td>309239045293459823945234895</td>
             </tr>
          </tbody>
     </table>

CSS：

.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
  white-space: nowrap;
}
#portal-drivers {
  overflow: auto;
}

jQuery

$("#portal-drivers").dataTable({
    "scrollX": true
});

- Ryan Salmons

Answer 1

将“scrollX”更改为“sScrollX”：'100％'

$("#portal-drivers").dataTable( {
    "sScrollX": '100%'
} );

- Ryan Salmons

---

scrollx和sscrollx有什么区别？ - Anoop LL

我也发现添加 responsive:false 对我很有帮助。我正在使用 ASP Net Zero，它还向表格添加了一个 dt-responsive 类，应该将其删除。 - Edmund Gentle

Answer 2

为了使数据表格可滚动（包括头部和内容），请使用以下属性sScrollXInner和sScrollX：

sScrollX: "100%",
sScrollXInner: "110%"

$("#my-demo-datable").dataTable({
    "sScrollX": "100%",
    "sScrollXInner": "110%",
});

将 sScrollXInner 设置为100％，可以使表格具有响应性，并仅在表格溢出时显示滚动条。 如果设置为110％，则始终会溢出。

- Ramraj Patel

---

对我来说，将"sScrollXInner"更改为"100"可以使响应式显示正常。 - user4318530

Answer 3

尝试将以下内容放入CSS中：

#portal-drivers {
    overflow-x: scroll;
    max-width: 40%;
    display: block;
    white-space: nowrap;
}

- magma

---

真的很好用。我在datatable应用中也使用了"sScrollX": '100%'，但是标题的宽度问题出现了。 - MSTdev

Answer 4

我尝试过这个方法，对我有效。

$(document).ready(function() {
    $('#example').dataTable( {
        "sScrollX": "100%",
        "sScrollXInner": "110%",
        "bScrollCollapse": true
    } );
} );

为了启用x轴滚动，您可以将sScrollX参数设置为容器包装器的宽度。此外，这里使用sScrollXInner来强制表格比实际需要的更宽。

- Sagiria

---

关于 "you can set the sScrollX parameter your container wrapper's width to be": 这部分内容有些不太清楚。你是否使用了机器翻译？你能修复一下吗？ - Peter Mortensen

Answer 5

为了使数据表可滚动，你可以尝试使用以下方法

$(document).ready(function() {
    $('#example').DataTable( {
        *"scrollY": 200,
        "scrollX": true
    } );
} )

- Manpreet