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 回答