jQuery 水平滚动 dataTables.js
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24717184/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Horizontal Scroll dataTables.js
提问by Ryan Salmons
I am having difficulty getting the horizontal scroll to work with dataTables.js. The expected result is a table that allows me to scroll horizontally within the table. The current result is a table that extends outside of the container div. Any solutions?
我很难让水平滚动与 dataTables.js 一起工作。预期的结果是一个允许我在表格内水平滚动的表格。当前结果是一个扩展到容器 div 之外的表。任何解决方案？
HTML:
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>[email protected]</td>
<td>(310) 530-6789</td>
<td>4.8</td>
<td>309239045293459823945234895</td>
</tr>
</tbody>
</table>
CSS:
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
} );
回答by Ryan Salmons
Change "scrollX" to "sScrollX": '100%'
将“scrollX”更改为“sScrollX”：'100%'
$("#portal-drivers").dataTable( {
"sScrollX": '100%'
} );
回答by Ramraj Patel
In order to make datatable scrollable (header and body both), use property sScrollXInneralong with sScrollXas following:
为了使数据表可滚动（标题和正文两者），使用特性sScrollXInner具有沿sScrollX如下：
$("#my-demo-datable").dataTable( {
"sScrollX": "100%",
"sScrollXInner": "110%",
} );
回答by magma
Try putting this into CSS:
尝试将其放入 CSS：
#portal-drivers {
overflow-x: scroll;
max-width: 40%;
display: block;
white-space: nowrap;
}
回答by Manpreet
For making datatable scroll-able ,you can try out this
为了使数据表可滚动，你可以试试这个
$(document).ready(function() {
$('#example').DataTable( {
*"scrollY": 200,
"scrollX": true
} );
} )
