启用 scrollX 时标题列与 DataTable 未对齐答案

【问题标题】：Header columns misaligned with DataTable when scrollX is enabled启用 scrollX 时标题列与 DataTable 未对齐
【发布时间】：2016-01-20 10:07:59
【问题描述】：

我有这个插件经常出现的问题。

启用 scrollX 选项时，标题列未对齐。我尝试了许多在 stackoverflow 上阅读的解决方案，但都没有成功。

可能是插件版本的问题？

但是，这是我的 dataTable 设置：

 var oTable = $('#table').dataTable({
        "bJQueryUI": true,
        "aaData": jsonList,
        "bPaginate": true,
        "scrollX": true,
        "scrollCollapse" : true,
        "bLengthChange" : true,
        "bAutoWidth" : true,
        "oLanguage" : IT,
        "aoColumns": [
            { "mDataProp": "name", "sClass": "alignCenter" }, 
            { "mDataProp": "surname", "sClass": "alignCenter" }, 
            { "mDataProp": "age", "sClass": "alignCenter" },
            { "mDataProp": "city", "sClass": "alignCenter" }, 
            { "mDataProp": "state", "sClass": "alignCenter" }, 
            { "mDataProp": "work", "sClass": "alignCenter" },                 
        ],
        "aaSorting": [[1, 'asc']],
        "fnDrawCallback": function () {         
            formatTable();
        }

我的餐桌风格：

class="display" cellspacing="0" width="100%"

库版本：

jquery-1.11.1.min.js - 数据表 1.10.3

【问题讨论】：

标签： jquery datatables

【解决方案1】：

当使用 scrollX 或 scrollY 参数在 DataTables 中启用滚动时，它会将整个表格拆分为两个或三个单独的 HTML 表格元素；页眉、正文和可选的页脚。这样做是为了能够以跨浏览器的方式滚动 DataTable 的不同部分。

下面的代码在 DataTable 周围包裹了一个 div，样式为“overflow as auto”。 dataTable 执行完成后，我们需要添加 div。我们可以这样做：

$('#DataTableID').DataTable({
  //"scrollX": true,            
  "initComplete": function (settings, json) {  
    $("#DataTableID").wrap("<div style='overflow:auto; width:100%;position:relative;'></div>");            
  },
});

如果您正在使用 scrollX、scrollY、scrollXInner 或 sScrollXInner 选项 - 删除它们。它们可能会导致问题。

来源：http://sforsuresh.in/datatables-header-body-not-aligned/

【讨论】：

【解决方案2】：

将标题表的宽度与正文表的宽度匹配。例如，如果正文中的宽度为 100%，则可以使用 css 作为标题：

.dataTables_scrollHeadInner{
    width: 100% !important; 
} 
.dataTables_scrollHeadInner table{
    width: 100% !important; 
}

【讨论】：

【解决方案3】：

这可能取决于您的 html，但也许删除 "scrollX": true，可能会对您有所帮助。

【讨论】：