问DataTables固定标题与宽表中的列未对齐

EN

问题

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

在使用1.9.4版本时，据我所知，只有当有大量宽度波动的数据，并且在与小数据相同的列中组合了非常长/不可换行的单词时，才会出现此问题。此外，有问题的表需要相当宽。

所有这些因素都在这个fiddle中得到了演示

输出

Chrome:

​

IE:

​

Firefox

​

建议的解决方案

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

• turn-off/remove all my css
• setTimeout( function () { oTable.fnAdjustColumnSizing(); }, 10 );
• calling oTable.fnFilter( "x",0 ) and oTable.fnFilter( "",0 ) in that order
• "sScrollXInner": "100%"
• get
  • turn-off/remove all widths

  (在该窗口中删除所有宽度和宽度)

对于未对齐的标题，我找到的唯一解决方案是去掉sScrollX和sScrollY，但这不能算作解决方案，因为您失去了固定标题/内部内容滚动功能。所以可悲的是，这只是一个临时的破解，而不是修复！

备注

编辑/播放最新的fiddle。

通过使用链接http://jsfiddle.net/pratik136/etL73/#REV# where 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
• My错误报告：http://datatables.net/forums/discussion/12491/datatables-header-alignment-issue-refresh#Item_1

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