horizontal scroll not working in jquery datatable plugin

Question

horizontal scroll in datatable.net not aligning headers with actual column data on scrolling. On scrolling table body gets moved but headers doesn't. I want to set headers scrollable.

My Code sample ::--------

 $('#abc').dataTable({
                "aaData": userContactGridData,
                "bAutoWidth":false,
                "aoColumnDefs": [
                    { "bSortable": false, "aTargets": ["icon", "adminRoleIcon", "gearIcon"] },// disable sorting on first and last column
                    { "sWidth": "20px", "aTargets": ["icon", "gearIcon"] },
                    { "sWidth": "200px", "aTargets": ["userName"] },
                    { "sClass": "icon", "aTargets": ["icon"] },
                    { "sClass": "gearIcon", "aTargets": ["gearIcon"] },
                    { "sClass": "userName", "aTargets": ["userName"] },
                    { "sClass": "adminRoleIcon", "aTargets": ["adminRoleIcon"] },
                    { "bVisible": false, "aTargets": ["adminRoleIcon"] },
                ],
                "sDom": 'C<"H"Tfr>t<"F"ip>',
                "iDisplayLength": 6,
                "bProcessing": true,
                "bJQueryUI": true,
                "sPaginationType": "full_numbers",
                "aaSorting": [[2, "asc"]], // sort by name by default
                "sScrollX": "100%",
                "bScrollCollapse": true
                });

Answer 1

Try adding sScrollX: 100% and bScrollCollapse: true

Then your code look like as below

    var oTable;
    $(document).ready(function () {
      oTable = $("#yourElementName").dataTable({
               "sScrollX": "100%",
               "bScrollCollapse": true,
               "bJQueryUI": true,
               "sPaginationType": "full_numbers",
               "aoColumnDefs": [{ "aTargets": [0], "bSortable": true },
                                 { "aTargets": ['_all'], "bSortable": false}], 
                                  "aaSorting": [[0, 'asc']]
                    
                });
    
                setTimeout(function () {
                    oTable.fnAdjustColumnSizing();
                }, 10);
    
            });