Jquery DataTable 中的滚动问题答案

【问题标题】：Scroll issue in Jquery DataTableJquery DataTable 中的滚动问题
【发布时间】：2013-04-11 05:19:27
【问题描述】：

如果是的话，我不确定我是否在重复这个问题：)

我正在使用数据表并尝试实现水平滚动并找到此链接

http://www.datatables.net/examples/basic_init/scroll_x.html

我在我的数据表代码中使用了这些属性，但在 UI 中遇到了问题。

我的数据有水平滚动条，但我的列没有展开，也没有按预期工作。我的正常列下方有额外的空列。

基本上我的用户界面是乱七八糟的。我看到了一个关于相同的旧线程讨论！

DataTables fixed headers misaligned with columns in wide tables

这些问题现在有解决方案吗？

=================================

添加示例代码

$("#results").dataTable({
    "aaData": [
        //My data
    ],
    "aoColumns": [
        //My Columns
    ],
    "bPaginate": true,
    "bSort": true,
    "bFilter": false,
    "bJQueryUI": false,
    "bProcessing": true,
    "sScrollX": "100%",
    "sScrollXInner": "110%",
    "bScrollCollapse": true
});

【问题讨论】：

添加了示例代码。我没有为列设置任何明确的宽度
您发布的内容没有任何问题。所以，还有别的原因。另外，您是否检查过您是否真的需要"sScrollXInner": "110%"？检查有关此属性的注释：还要注意，此处使用 sScrollXInner 来强制表格比严格需要的更宽。根据您的应用程序，您可能希望也可能不希望包含此参数。
如果我添加 sScrollX 它会在我的表中添加一个额外的空列会发生什么？

标签： jquery jquery-datatables

【解决方案1】：

我遇到了类似的问题，但以不同的方式解决了。

我修改了sDom 参数以将表格包装在一个额外的div 中：

sDom: 'r<"H"lf><"datatable-scroll"t><"F"ip>',

然后我将以下样式应用于.datatable-scroll 类：

/**
 * Makes the table have horizontal scroll bar if its too wide for its container
 */
.datatable-scroll {
    overflow-x: auto;
    overflow-y: visible;
}

http://datatables.net/usage/options#sDom

【讨论】：

您的解决方案很棒。我一直在测试许多解决 Scroll 头部和身体对齐问题的解决方案，但在所有浏览器中都没有任何效果。这个解决方案是完美的，跨浏览器并且不会通过更多的 hack 调用使 javascript 过载。（我正在编辑您的答案以通过另一个示例添加更多信息）。太感谢了！ :)
在互联网上对滚动进行了令人厌烦的研究后找到了迄今为止的最佳答案。但是，您可能想添加 float: left;宽度：你的值px； position: relative; 在 .datatable-scroll 类中，以便兼容 IE7 & IE8 浏览器。因为我必须添加这些值。此外，如果你只需要水平滚动条，你将不得不使用 overflow-x:scroll; overflow-y: hidden; 否则会在 IE 中产生副作用。无论如何，非常感谢哥们！！