DataTables固定标题与宽表中的列未对齐
问题
当使用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 )andoTable.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
这个问题快把我逼疯了！请贡献你的想法！
回答 21
Stack Overflow用户
发布于 2013-08-07 23:47:09
编辑:查看最新的带有"fixed Fiddle“的标题：
其中一个解决方案是自己实现滚动，而不是让DataTables插件为你做。
我以你的例子为例，注释掉了sScrollX选项。当这个选项不存在时，DataTables插件会简单地将你的表直接放入一个容器div中。这个表将从屏幕上延伸出来，因此，为了解决这个问题，我们可以将它放到一个具有所需宽度的div中，并设置一个overflow属性-这正是最后一条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())});Stack Overflow用户
发布于 2012-11-08 21:26:41
以下是一种实现固定头表的方法，我不知道它是否足以满足您的目的。更改包括：
- 使用"bScrollCollapse“而不是fieldset来包装表格
- 添加一个"div.box”css类
它似乎在我的本地机器上完全正常工作，但它不能完全使用Fiddle。看起来斐德尔添加了一个css文件(normalize.css)，这在某种程度上破坏了插件的css (我非常确定我也可以在file中完全工作，添加一些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>Stack Overflow用户
发布于 2014-06-26 21:05:57
我在IE9上也遇到了同样的问题。
在将RegExp写入页面之前，我将使用HTML去掉所有空格。
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>'
} );https://stackoverflow.com/questions/13178039
复制相似问题