jquery – DataTables固定标题与宽表中的列不对齐

问题

当使用sScrollX，sScrollXInner和/或sScrollY实现一个固定的标题表及其内容内容滚动时，表头与Chrome和IE的其他部分不一致。 Firefox另一方面完美地显示它们。

使用版本1.9.4，据我所知，这个问题只发生在当有很多数据具有波动的宽度，并且具有非常长/可解包的字词在与小的相同列中组合时。此外，有问题的表需要相当宽。

所有这些因素都表现在这个小提琴：http://jsfiddle.net/pratik136/etL73/embedded/result/

输出

铬：

IE：

Firefox

建议的解决方案

这些解决方案之前已经建议，但没有影响我的实现。由于其中的一些建议，我设置一个干净的纯香草演示，因为我想确保没有其他代码为这种效果贡献。

>关闭/删除所有我的CSS
> setTimeout(function(){oTable.fnAdjustColumnSizing();}，10);
>按顺序调用oTable.fnFilter(“x”，0)和oTable.fnFilter(“”，0)
>“sScrollXInner”：“100％”
>摆脱所有宽度

我发现对错位头部的唯一解决方案是取出sScrollX和sScrollY，但这不能算作一个解决方案，因为你失去固定的标题/内容内容滚动功能。所以可悲的是它是一个临时的黑客，而不是一个修复！

注意

编辑/使用最新的小提琴：http://jsfiddle.net/pratik136/etL73

我尝试了通过使用链接http://jsfiddle.net/pratik136/etL73/#REV#可以在小提琴的修订历史中观察到的各种组合，其中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

这个问题让我疯了！请提出你的想法！

解决方法

编辑：
查看最新fiddle with“fixed header”： http://jsfiddle.net/ruslans_uralovs/zDaGk/

小提琴：
http://jsfiddle.net/hDgHs/

其中一个解决方案是实现滚动自己，而不是让DataTables插件为你做。

我已经采取了你的例子，并注释掉了sScrollX选项。当这个选项不存在DataTables插件将简单地把你的表作为一个容器div。这个表将伸展出屏幕，因此修复，我们可以把它放入一个div所需的宽度和溢出preperty设置 – 这正是最后一个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,"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())});