Header columns misaligned with DataTable when scrollX is enabled

Stack Overflow Asked on December 17, 2020

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 () {         

Style of my table:

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

Version of libraries:

jquery-1.11.1.min.js –
DataTables 1.10.3

2 Answers

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:

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

Answered by ilo on December 17, 2020

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:

  //"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 :

Answered by Suresh Kamrushi on December 17, 2020

Add your own answers!

Related Questions

How to determine the number of negation words per sentence

2  Asked on January 3, 2021 by user14289862


Scala getClass.getResource() returning null

4  Asked on January 3, 2021 by tower


Use background image instead of border

1  Asked on January 2, 2021 by user3808307


Appended messages collides with previous data

1  Asked on January 2, 2021 by nancy-mooree


My gRPC-Test Project just work on localhost

1  Asked on January 2, 2021 by blindmeis


URL constructor appends ‘/’ at the end of the url

0  Asked on January 2, 2021 by ayusch-jain


Using the AWS EC2 Query API

1  Asked on January 2, 2021 by xliff


guidata not updating in MATLAB GUI

3  Asked on January 2, 2021 by matias-andina


Change long click delay

7  Asked on January 1, 2021 by fhucho


Dynamic parameters startWith Rxjs

1  Asked on January 1, 2021 by luden


Passing variables from a HTML form to PHP

2  Asked on January 1, 2021 by jim-r


Ask a Question

Get help from others!

© 2022 All rights reserved. Sites we Love: PCI Database, MenuIva, UKBizDB, Menu Kuliner, Sharing RPP