应用滚动时数据表未对齐表的标题和正文答案

【问题标题】：Data-Table misaligning the title and body of the table when scroll is apply应用滚动时数据表未对齐表的标题和正文
【发布时间】：2014-04-08 13:04:43
【问题描述】：

我正在尝试在我的模板表上应用 DataTable jquery 插件。但是当我应用滚动时，表格的标题和正文未对齐。

你能帮帮我吗？

JsFiddle

在我的表上应用 DataTable 的 Jquery 代码：

$(function(){
$('#tabelainfo').dataTable({
    "bLengthChange": false,
    "bFilter": true,
    "bSort": true,
    "bInfo": true,
    "bAutoWidth": false,
    "sScrollY": "200px",
    "sScrollX": "100%",
    "sPaginationType": "full_numbers",
    "bRetrieve": true,
    "bScrollCollapse": true,
});

$(window).bind('resize', function() {
    oTable.fnAdjustColumnSizing();
});
jQuery('#' + idTabela).wrap('<div class="scrollStyle" />');

});

请看下面的小提琴：

谢谢！

【问题讨论】：

标签： jquery css datatable datatables jquery-datatables

【解决方案1】：

请注意，差异正是垂直滚动条的宽度。这是因为您在同一页面上同时拥有 sScrollY 和 sScrollX。

.dataTables_scrollHead 和.dataTables_scrollBody 这两个部分都有100% 的宽度，但.dataTables_scrollBody 会减少垂直滚动条的宽度，因为您也有sScrollY。

所以解决方案是用垂直滚动条窃取的额外宽度扩展.dataTables_scrollBody。见how you can calculate the width of a scollbar。通常是 15。

这必须以百分比的形式添加到.dataTables_scrollBody，而不是像素。在 1315px 表格中，最接近 15 的百分比是 2% (26)。因此，在初始化数据表后将其添加到您的脚本中：

$(".dataTables_scrollBody").css('width', '102%');

分叉小提琴 -> http://jsfiddle.net/YL7hZ/

【讨论】：

问题已在 JsFiddle 中解决，但在我的表中仍然存在。我将在 JsFiddle 中重现该问题，然后在此处发布。谢谢！
davidkonrad，我接受你的回答是因为你决定了这个问题的内容。太感谢了。所以，稍后我将在小提琴中重现问题，在 Stack Overflow 中发布一个新问题并提及您。
新问题出现在我的模板上。
@mayconfsbrito，问题毫无疑问是使用bootstrap.min.css 和dataTables.bootstrap.css (??) 没有使用jquery.dataTables.css。你确定dataTables.bootstrap.css 是最新的吗？如果我添加 jquery.dataTables.css 它会更好地工作 -> jsfiddle.net/6K9aL
但是，某些 CSS-“扩展”显然会覆盖某些内容，从而破坏数据表的 sScroll?-逻辑。使用“干净”的数据表设置，您不必增加 dataTable_scrollbody 的宽度，请参阅此 -> jsfiddle.net/5SzXR

【解决方案2】：

我也面临同样的问题。如果您将短列表宽度与 scrollX 选项结合使用，则会发生这种情况。

所以，我的解决方案是将值 scrollX 设置为 false 或将其删除。

"scrollX"       : false,

也许这个答案可以帮助将来的人。

【讨论】：

这对我有用。我正在摆弄太多的变化，但最后这个答案有所帮助。