7

我遇到了 Datatables 没有正确使用其 x 轴滚动的问题。

我之前遇到过 IE9 'ghost cell' 问题，我能够修复。但是，现在我遇到了一个问题，即显示我的溢出 x，而不是隐藏它并使窗口可滚动。

我的数据表初始化：

 var oTable = $('#tableBP').dataTable({
        "bJQueryUI": true,
        "sScrollX": "100%",
        "sScrollXInner": "200%",
        "sScrollY": 300,
        "bScrollCollapse": false,
        "bFilter": true,
        "bSort": false,
        "bInfo": false,
        "bPaginate": false
    });

    //This is a Datatables plugin. The issue occurs whether I comment this part or not.
    new FixedColumns(oTable, { 
        "iLeftWidth": 225
    });

这就是我所面临的：overflowX 无法正常工作

虽然它在 IE9 兼容模式下工作。不幸的是，页面的其他部分不允许我运行这是一个较低版本的兼容性，但这清楚地将其标记为仅限 IE9 的问题。在 Chrome、Safari、Opera、Firefox 中没有问题。

我不会在这里发布表格，因为它的大小（在某些情况下是 2000+ td 字段）。这是一个完全有效的 HTML 表格，带有一个 thead/tbody，并且标签之间的所有空格都已被删除（这是修复我之前的幽灵单元问题的原因）。

有人对 Datatables 有任何经验并知道此问题的根本原因吗？

PS：这是一个 MVC2 应用程序（C#.Net），但这个问题似乎与生成此网页的应用程序无关。

更新

我忘了提到以下部分：

表格曾经正确显示；但由于 IE9 在大表中的幽灵单元问题，我被迫清除 table/thead/tbody/tr/td 标签之间的所有空格。我通过在我的应用程序的 HTML 输出上强制进行正则表达式替换来解决这个问题：

// response is the string with my HTML output which will be written to the browser after this:

string expression = @">[ \t\r\n\v\f]*<td"; 
response = Regex.Replace(response, expression, @"> <td");

如果我注释掉 RegEx 替换，数据表的溢出效果很好，但我面临着导致错位和全面丑陋的幽灵单元问题。取消注释时，所有单元格都完全对齐，但溢出停止工作。

就像我说的，这个问题只与 IE9 有关。所有其他浏览器（包括兼容模式下的 IE9）在注释/未注释状态下完美呈现表格。

4

5 回答 5

3

经过大量的搜索和耐心，我已经设法解决了这个问题。

这个问题与 Bootstrap 相关。好吧，不完全是 Bootstrap，但 Bootstrap.css 所做的是max-width: 100%;向每个表添加一个。这对于一般布局非常有用，但显然 IE9 无法将其与可滚动overflow-x设置相结合。根据我的经验，IE9 并不喜欢最大和最小高度和宽度。

但我还是要感谢你们所有人的努力，你们让我走上了正确的道路，找到了这个问题的根源！

于 2012-09-20T14:57:16.777 回答
2

添加这个，在demo_table_jui.css第 117 行（下.dataTables_wrapper）：

.DTFC_ScrollWrapper {
    overflow: hidden;
    overflow-x: scroll;
}

这可以解决问题（至少，在这里，在所有浏览器中，包括 IE9 中的 IE7 和 IE8 文档模式）。

工作水平滚动（无垂直滚动条），带有搜索框的标题保持在视图中

已编辑：不应.dataTables_wrapper像我在此答案前面所建议的那样添加溢出代码，但.DTFC ScrollWrapper应使用溢出指定类，请参见上面的代码。

顺便说一句，完全不相关：这家公司总是让我想起“De Bende van Nijvel”，不要问我为什么；）

于 2012-09-18T08:10:48.140 回答
0

这是line 110在.dataTables_wrapper添加overflow:auto;后的解决方案clear:both;

.dataTables_wrapper {
    position: relative;
    min-height: 302px;
    _height: 302px;
    clear: both;
    overflow:auto;
}

前

前
（来源：iforce.co.nz）

后

后
（来源：iforce.co.nz）

如果您想很好地坐在搜索工具栏下方overflow:auto;，可能想在 3 个表格周围添加一个额外的 div 并给出它。clear:both;

于 2012-09-18T08:46:59.890 回答
0 
/*
 * The position is changed from relative to inherit, to fix the issue with the scrolling of the wrapper.
 */

.dataTables_wrapper {
    position: inherit;
    clear: both;
    *zoom: 1;
}

问题可能是由于 DIV 的位置。我通过覆盖数据表 css 中的位置解决了类似的问题。

于 2013-01-14T09:44:03.120 回答
0

我通过应用以下 CSS 解决了这个问题：

/* this is needed for IE and Firefox if using horizontal scroll*/
table{
    max-width: none;
    min-height: 0%;
}
于 2013-11-22T16:58:44.717 回答