jquery - DataTables 修复了标题与宽表中的列不对齐的问题

Question

问题

使用 sScrollX 时, sScrollXInner和/或 sScrollY为了实现内部内容滚动的固定标题表格，在 Chrome 和 IE 中，表格的标题与正文的其余部分不对齐。另一方面，Firefox 可以完美地显示它们。

据我所知，使用 1.9.4 版本时，只有当存在大量宽度波动的数据，并且单词非常长/无法折叠并与小单词组合在同一列中时，才会出现此问题。此外，相关表格需要相当宽。

所有这些因素都在 fiddle 中得到了证明。 :

输出

Chrome:

IE:

火狐浏览器

建议的解决方案

这些解决方案之前已被建议过，但对我的实现没有影响。由于其中一些建议，我设置了一个干净的普通演示，因为我想确保没有其他代码促成此效果。

• 关闭/删除我所有的 CSS
• setTimeout( function () { oTable.fnAdjustColumnSizing(); }, 10 );
• 调用 oTable.fnFilter( "x",0 )和oTable.fnFilter( "",0 )按此顺序
• "sScrollXInner": "100%"
• 去掉所有宽度

我发现的标题未对齐的唯一解决方案是取出 sScrollX和sScrollY ，但这不能算作解决方案，因为您失去了固定标题/内部内容滚动功能。遗憾的是，这只是暂时的黑客攻击，而不是修复!

注意

编辑/播放最新的fiddle .

我尝试了各种组合，可以通过使用链接http://jsfiddle.net/pratik136/etL73/#REV#在 fiddle 的修订历史记录中观察到这些组合。哪里1 <= #REV# <= 12

历史记录

StackO
这个问题之前已经被问过:jQuery Datatables Header Misaligned With Vertical Scrolling
但最重要的区别是，该问题的OP提到，如果删除所有CSS，他们就能够解决问题，这对我来说是不正确的，并且我尝试了一些排列，因此认为这个问题值得重新发布。

外部
DataTables 论坛上也标记了此问题:

• http://datatables.net/forums/discussion/7395/sscrolly-and-sscrollx-broken/p1
• http://datatables.net/forums/discussion/7778/vertical-scrolling-messes-up-column-header-alignment#Item_1
• http://datatables.net/forums/discussion/3835/width-columns-problem-in-chrome-safari/p1
• 我的错误报告:http://datatables.net/forums/discussion/12491/datatables-header-alignment-issue-refresh#Item_1

这个问题快把我逼疯了!请贡献您的想法!

Answer 1

编辑: 查看最新Fiddle使用“固定标题”:

<小时/>

Fiddle .

解决方案之一是自己实现滚动，而不是让 DataTables 插件为您实现。

我采用了您的示例并注释掉了 sScrollX 选项。当此选项不存在时，DataTables 插件将简单地将您的表按原样放入容器 div 中。该表将伸出屏幕，因此，为了解决这个问题，我们可以将其放入具有所需宽度和溢出属性集的 div 中 - 这正是最后一个 jQuery 语句的作用 - 它将现有表包装到 300px 宽的 div 中。您可能根本不需要设置环绕 div 的宽度(在本例中为 300px)，我在这里设置了它，以便可以轻松看到剪切效果。 友善一点，不要忘记用类替换内联样式。

$(document).ready(function() {
var stdTable1 = $(".standard-grid1").dataTable({
    "iDisplayLength": -1,
    "bPaginate": true,
    "iCookieDuration": 60,
    "bStateSave": false,
    "bAutoWidth": false,
    //true
    "bScrollAutoCss": true,
    "bProcessing": true,
    "bRetrieve": true,
    "bJQueryUI": true,
    //"sDom": 't',
    "sDom": '<"H"CTrf>t<"F"lip>',
    "aLengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]],
    //"sScrollY": "500px",
    //"sScrollX": "100%",
    "sScrollXInner": "110%",
    "fnInitComplete": function() {
        this.css("visibility", "visible");
    }
});

var tableId = 'PeopleIndexTable';
$('<div style="width: 300px; overflow: auto"></div>').append($('#' + tableId)).insertAfter($('#' + tableId + '_wrapper div').first())});