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

ilo · Answer

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; 
}

Suresh Kamrushi · Answer

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/

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

Header columns misaligned with DataTable when scrollX is enabled

2 Answers

Add your own answers!

Ask a Question