Jquery DataTable 中的滚动问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16077090/
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
Scroll issue in Jquery DataTable
提问by user2067567
I am not sure if I am repeating the question if yes guide to the right place :)
我不确定我是否在重复这个问题，如果是正确的地方指南:)
I am using Data table and trying to implement Horizontal Scrolling and found this link
我正在使用数据表并尝试实现水平滚动并找到此链接
http://www.datatables.net/examples/basic_init/scroll_x.html
http://www.datatables.net/examples/basic_init/scroll_x.html
i used these properties in my Data Table code and am having issues in UI.
我在我的数据表代码中使用了这些属性，但在 UI 中遇到了问题。
My data got the horizontal scroll bar but my columns didn't expand and not working as expected.i got additional empty column below my normal column.
我的数据有水平滚动条，但我的列没有扩展，也没有按预期工作。我在正常列下方有额外的空列。
Basically my UI is messed up. i saw a old thread discussion on the same!
基本上我的用户界面搞砸了。我看到一个旧线程讨论相同！
DataTables fixed headers misaligned with columns in wide tables
Are these issues fixed now any solutions ?
这些问题现在解决了吗？
================================
================================
Adding sample code
添加示例代码
$("#results").dataTable({
"aaData": [
//My data
],
"aoColumns": [
//My Columns
],
"bPaginate": true,
"bSort": true,
"bFilter": false,
"bJQueryUI": false,
"bProcessing": true,
"sScrollX": "100%",
"sScrollXInner": "110%",
"bScrollCollapse": true
});
回答by Petah
I had a similar issue, but solved it in a different way.
我有一个类似的问题，但以不同的方式解决了它。
I modified the sDomparameter to wrap the table in an extra div:
我修改了sDom参数以将表格包装在额外的内容中div：
sDom: 'r<"H"lf><"datatable-scroll"t><"F"ip>',
I then applied the following styles to the .datatable-scrollclass:
然后我将以下样式应用于.datatable-scroll类：
/**
* Makes the table have horizontal scroll bar if its too wide for its container
*/
.datatable-scroll {
overflow-x: auto;
overflow-y: visible;
}
