启用scrollX时，标题列与DataTable不对齐 [英] Header columns misaligned with DataTable when scrollX is enabled

问题描述

此插件经常出现问题.

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

When scrollX option is enabled, the header columns are misaligned. I tried many solutions read on stackoverflow, but I don't have success.

也许是版本问题?

但是，这是我的dataTable设置:

Howevere, this is my dataTable settings:

 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-1.11.1.min.js - DataTables 1.10.3

推荐答案

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

When scrolling is enabled in DataTables using scrollX or scrollY parameters, it will split the entire table into two or three individual HTML table elements; the header, the body and, optionally, the footer. This is done in order to provide the ability to scroll the different sections of the DataTable in a cross-browser manner.

下面的代码将div环绕在DataTable上，样式为自动溢出".当dataTable完成执行时，我们需要添加div. 我们可以这样做，如下所示:

Below code wrap a div around the DataTable with style "overflow as auto". We need to add div when dataTable completed the execution. We can do this as below:

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

如果您使用的是scrollX，scrollY，scrollXInner或sScrollXInner选项，请删除它们.它们可能会引起问题.

If you are using the scrollX,scrollY, scrollXInner or sScrollXInner options – remove them. They may cause probles.

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

这篇关于启用scrollX时，标题列与DataTable不对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！