Header columns misaligned with DataTable when scrollX is enabled

Question

I have a problem that is recurrent with this plugin.

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

Maybe, is it a problem of the plugin version?

However, this are 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();
        }

Style of my table:

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

Version of libraries:

jquery-1.11.1.min.js - DataTables 1.10.3

Wolfgang

Answer 1

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.

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>");            
  },
});

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

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

Guacharo

Answer 2

Matches the width of the header table to the width of the body table. For example, if you have a width of 100% in the body, you could use css for the header:

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

Soap

Answer 3

Try the option autoWidth: false

Windward

Thank you, I was almost bald trying to get this to work properly, and adding this to my config in DataTables 2.0.5 solved the issue. – Nyaya

Answer 4

The problem still exists in Datatables 2.1.2.

An inelegant fix is to force the width:

  initComplete: function (settings, json) {   
   document.getElementById("DataTables_Table_0").style.width =
      document.querySelector(
        "#DataTables_Table_0_wrapper .dt-scroll-head .dt-scroll-headInner"
       ).style.width;
}

Heinrick

Answer 5

It may depend on your html, but perhaps removing "scrollX": true, may help you.

Activism