DataTables固定标题与宽表中的列未alignment
问题
当使用sScrollX ， sScrollXInner和/或sScrollY来实现内部滚动内容的固定表头时，表格的标题与Chrome和IE中的其余部分不一致。 另一方面，Firefox可以完美地显示它们。
使用版本1.9.4，据我所知，这个问题只发生在有大量宽度波动的数据的情况下，并且在很长的/不可打包的文件中与小的文件在同一列中组合在一起。 此外，表中的问题需要相当广泛。
所有这些因素在这个小提琴演示： http : //jsfiddle.net/pratik136/etL73/embedded/result/
产量
铬：
IE：
火狐
build议解决scheme
这些解决scheme之前已经提出，但对我的实施没有影响 。 由于其中的一些build议，我设置了一个干净的普通香草演示，因为我想确保没有其他代码对这种效果有所贡献。
- closures/删除我所有的CSS
-
setTimeout( function () { oTable.fnAdjustColumnSizing(); }, 10 ); -
oTable.fnFilter( "x",0 )调用oTable.fnFilter( "x",0 )和oTable.fnFilter( "",0 ) -
"sScrollXInner": "100%" - 摆脱所有的宽度
我find的错误标题唯一的解决scheme是取出sScrollX和sScrollY ，但这不能算作一个解决scheme，因为你失去了固定头/内容滚动function。 很遗憾，这只是一个暂时的黑客，而不是修复！
注意
编辑/使用最新的小提琴： http : //jsfiddle.net/pratik136/etL73
我已经尝试了各种组合，可以在小提琴的修订历史logging中使用链接http://jsfiddle.net/pratik136/etL73/#REV#其中1 <= #REV# <= 12
历史
StackO
这个问题之前已经被问到： jQuery Datatables Header与垂直滚动不一致
但是最大的不同是，这个问题的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
这个问题使我疯狂！ 请贡献你的想法！
编辑：查看最新的小提琴与“固定标题”： http : //jsfiddle.net/ruslans_uralovs/zDaGk/
小提琴： http : //jsfiddle.net/hDgHs/
其中一个解决scheme是实现滚动，而不是让DataTables插件为你做。
我已经把你的例子和sScrollX选项注释掉了。 当这个选项不存在时，DataTables插件将简单地把你的表放到一个容器div中。 这个表格将伸出屏幕，因此我们可以把它放到一个具有所需宽度的div和一个溢出属性集合中 – 这正是最后一条jQuery语句所做的 – 它将现有的表格包装成300px宽的div。 你可能根本不需要在包装div上设置宽度（在这个例子中是300px），我在这里是这样的，所以剪切效果很容易看到。 如果不错，不要忘了用一个类来replace这个内联样式。
$(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())});
以下是实现一个固定的头表的一种方式，我不知道它是否足够你的目的。 变化是：
- 使用“bScrollCollapse”而不是“sScrollXInner”
- 不要使用fieldset来换行
- 添加一个“div.box”css类
它似乎完全在我的本地机器上工作，但它不完全使用小提琴工作。 似乎小提琴添加了一个CSS文件（normalize.css），在某种方式打破了插件的CSS（相当肯定，我可以充分工作也在小提琴添加一些CSS清晰的规则，但没有时间进一步调查现在）
我的工作代码片段如下。 希望这可以帮助。
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script> <script type='text/javascript' src="http://datatables.net/release-datatables/media/js/jquery.dataTables.min.js"></script> <style type='text/css'> div.box { height: 100px; padding: 10px; overflow: auto; border: 1px solid #8080FF; background-color: #E5E5FF; } .standard-grid1, .standard-grid1 td, .standard-grid1 th { border: solid black thin; } </style> <script type='text/javascript'> $(window).load(function(){ $(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": '<"H"CTrf>t<"F"lip>', "aLengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]], "sScrollX": "100%", //"sScrollXInner": "110%", "bScrollCollapse": true, "fnInitComplete": function() { this.css("visibility", "visible"); } }); }); }); </script> </head> <body> <div> <table class="standard-grid1 full-width content-scrollable" id="PeopleIndexTable"> <thead> <!-- put your table header HTML here --> </thead> <tbody> <!-- put your table body HTML here --> </tbody> </table> </div> </body> </html>
我在IE9上遇到同样的问题。
在将HTML写入页面之前，我将使用RegExp去除所有的空格。
var Tables=$('##table_ID').html(); var expr = new RegExp('>[ \t\r\n\v\f]*<', 'g'); Tables= Tables.replace(expr, '><'); $('##table_ID').html(Tables); oTable = $('##table_ID').dataTable( { "bPaginate": false, "bLengthChange": false, "bFilter": false, "bSort": true, "bInfo": true, "bAutoWidth": false, "sScrollY": ($(window).height() - 320), "sScrollX": "100%", "iDisplayLength":-1, "sDom": 'rt<"bottom"i flp>' } );
添加这两行解决了这个问题给我
"responsive": true, "bAutoWidth": true
现在有一个响应式插件可用： https ： //datatables.net/extensions/responsive/ 。 但是，根据我的经验，我发现还有一些错误。 这仍然是迄今为止我find的最好的解决scheme。
下面的代码工作。 更正了IE 9.0的问题。 希望这可以帮助
var oTable = $('#tblList').dataTable({ "sScrollY": "320px", "bScrollCollapse": true, }); setTimeout(function(){ oTable.fnAdjustColumnSizing(); },10);
我有同样的问题，这个代码解决了这个问题。 我从这篇文章中得到了这个解决scheme，但我不得不调整它的工作时间间隔。
setTimeout(function(){ oTable.fnAdjustColumnSizing(); },50);
试试这个，下面的代码解决了我的问题
table.dataTable tbody th,table.dataTable tbody td { white-space: nowrap; }
欲了解更多信息，请参阅这里 。
使用空白string初始化DataTable后，触发DataTablesearchfunction。 它会自动调整与tbody错位。
$( document ).ready(function() { $('#monitor_data_voyage').DataTable( { scrollY:150, bSort:false, bPaginate:false, sScrollX: "100%", scrollX: true, } ); setTimeout( function(){ $('#monitor_data_voyage').DataTable().search( '' ).draw(); }, 10 ); });
添加table-layout: fixed到您的表格样式（CSS或样式属性）。
浏览器将停止应用其自定义algorithm来解决大小限制。
在网页上查找有关处理固定表格布局中列宽的信息（这里有两个简单的SO问题： 这里和这里 ）
显然：缺点是你的专栏的宽度不适应他们的内容。
[编辑]当我使用FixedHeader插件的时候，我的回答很奏效，但是在数据表的论坛上发表的post似乎表明使用sScrollX选项时会出现其他问题：
设置sScrollX时忽略bAutoWidth和sWidth（v1.7.5）
我会尽力find一个方法来解决这个问题。
对于bootstrap用户来说，这对我来说是固定的：
$($.fn.dataTable.tables(true)).DataTable() .columns.adjust() .fixedColumns().relayout();
在这里看到文章
我知道已经有一个答案了，但对于有类似问题的人来说，上面的方法是行不通的。 我将它与引导主题一起使用。
有一行可以在dataTables.fixedHeader.js文件中修改。 该函数的默认布局如下所示。
_matchWidths: function (from, to) { var get = function (name) { return $(name, from) .map(function () { return $(this).width(); }).toArray(); }; var set = function (name, toWidths) { $(name, to).each(function (i) { $(this).css({ width: toWidths[i], minWidth: toWidths[i] }); }); }; var thWidths = get('th'); var tdWidths = get('td'); set('th', thWidths); set('td', tdWidths); },
改变
return $(this).width();
至
return $(this).outerWidth();
如果你使用的是更新版本的jquery，outerWidth（）是一个包含在jquery.dimensions.js中的函数。 即。 jQuery的3.1.1.js
上面的函数做的是映射原始表的th，然后将它们应用到“克隆”表（固定头）。 在我的情况下，他们总是偏离约5px至8px错位。 最有可能不是最好的解决scheme，但提供了解决scheme中的所有其他表的解决scheme，而无需指定每个表声明。 到目前为止，它只在Chrome中进行过testing，但是它应该在所有浏览器上提供一个判断解决scheme。
如果你想使用scrollY使用：
$（ 'DataTables_sort_wrapper'）的触发器（ “点击”）。
我在我的应用程序中通过在css中添加下面的代码来修复相同的问题 –
.dataTables_scrollHeadInner { width: 640px !important; }
我已经使用下面的概念修复了列问题bu
$(".panel-title a").click(function(){ setTimeout( function(){ $('#tblSValidationFilerGrid').DataTable().search( '' ).draw(); }, 10 ); })
面对同样的问题最近，仍然在寻找解决scheme，当我尝试了一些我的CSS，检查是否添加到您的单元格（th和td）
-webkit-box-sizing: content-box; -moz-box-sizing: content-box; -sizing: content-box;
将解决这个问题; 对我来说，我正在使用一些html / css框架，在每个元素border-box添加一个border-box值。
而使用sScrollX，sScrollY使用单独的div风格
.scrollStyle { height:200px;overflow-x:auto;overflow-y:scroll; }
在脚本中的数据表调用之后添加
jQuery('.dataTable').wrap('<div class="scrollStyle" />');
它经过多次尝试完美运作 。
我有这个相同的问题，看到了很多复杂的答案，似乎从来没有工作。 我确实通过覆盖下面的CSS（site.css）解决了这个问题，并在Chrome，IE和Firefox中修复了它：
table.display td { padding: 0px 5px; } /* this is needed for IE and Firefox if using horizontal scroll*/ table{ max-width: none; min-height: 0%; }
这覆盖了datatable.jui.css中的CSS
我只是想出一个办法来解决alignment问题。 更改包含静态头的div的宽度将修复其alignment。 我发现的最佳宽度是98％。 请参阅代码。
自动生成的div：
<div class="dataTables_scrollHead" style="overflow: hidden; position: relative; border: 0px none; width: 100%;">
这里的宽度是100％，初始化和重新加载数据表时将其更改为98％。
jQuery('#dashboard').dataTable({ "sEcho": "1", "aaSorting": [[aasortvalue, 'desc']], "bServerSide": true, "sAjaxSource": "NF.do?method=loadData&Table=dashboardReport", "bProcessing": true, "sPaginationType": "full_numbers", "sDom": "lrtip", // Add 'f' to add back in filtering "bJQueryUI": false, "sScrollX": "100%", "sScrollY": "450px", "iDisplayLength": '<%=recordCount%>', "bScrollCollapse": true, "bScrollAutoCss": true, "fnInitComplete": function () { jQuery('.dataTables_scrollHead').css('width', '98%'); //changing the width }, "fnDrawCallback": function () { jQuery('.dataTables_scrollHead').css('width', '98%');//changing the width } });
尝试这个
这对我的作品…我为我的解决scheme添加了CSS，它的工作原理…虽然我没有改变任何数据表的CSS除了{border-collapse：separate;}
.dataTables_scrollHeadInner { /*for positioning header when scrolling is applied*/ padding:0% ! important }
