Question

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

启用scrollX选项时，标题列未对齐。我在堆栈溢出上尝试了很多解决方案，但我没有成功。

也许，这是一个版本问题吗？

Howevere，这是我的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 - DataTables 1.10.3

Answer 1

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

下面的代码将div环绕在DataTable上，样式为“自动溢出”。当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/

Answer 2

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

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

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

2 个答案: