Misaligned column headings using sScrollX sScrollY

shorif2000

I saw this post but discussion has been closed so I am creating new. I created a question on stackoverflow but no one is responding.

Below is the code that I have which is causing me issues when I add sScrollX/Y features

oTable = $('#table_d').DataTable({
        dom: 'iBfrtp',
        buttons: [
            {
                extend:    'copyHtml5',
                text:      '<i class="fa fa-clipboard fa-1x" aria-hidden="true"></i>',
                titleAttr: 'Copy'
            },
            , {
                extend: 'excelHtml5',
                title:  'ANOC-COOS Reports from Remedy',
                text:   '<i class="fa fa-file-excel-o fa-1x"></i>',
                titleAttr:  'Excel'
            }
        ],
        //"autoWidth": false,
        //"ordering" : false,
        deferRender: true,
        searchHighlight: true,
        'sScrollX': '100%',
        'scrollX': true,
        'sScrollY': ($(window).height()-520),
        scrollCollapse: true,
        'bScrollCollapse': true,
        'paging':   false,
        'info':     true,
        "lengthChange": true,
        fixedHeader: true,      
        fixedColumns:   true,   
        initComplete: function () {
            
            this.api().columns('.multi-select-filter').every( function () {
                var column = this;
                var select = $('<select class="form-control js-example-basic-multiple" multiple="multiple"><option value="">All</option></select>')
                    .appendTo( $(column.footer()).empty() )
                    .on( 'change', function () {
                       var val = $(this).val();

                       if(val != "" && val != null){
                           
                           val = val.join("|");
                       }else{
                           val = "";
                       }

                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );

                var blank = false;
                column.data().unique().sort().each( function ( d, j ) {
                    var html = d;
                    var div = document.createElement("div");
                    div.innerHTML = html;
                    var text = div.textContent || div.innerText || "";
                    if(text == "" && !blank){
                        select.append( "<option value=''></option>" )
                    }else{
                        select.append( "<option value='"+html+"'>"+text+"</option>" )
                    }
                    if(text == ""){
                        blank = true;
                    }
                    
                } );
            } );

            $(".js-example-basic-multiple").select2({
                dropdownAutoWidth : true,
                width: '100%',
                //allowClear: true,
            });
            
/*
            $(".header_SITE, .header_JVCO_ID").css("padding-right","32px");
            $(".header_INCIDENT_NUMBER, .header_CRQ ").css("padding-right","31px");
            */
        },
       /* "headerCallback": function( thead, data, start, end, display ) {
            jQuery(thead).find('th').eq(15).css('width', '300px');
          },*/
        "fnDrawCallback": function (oSettings) {
            
            //alert( 'DataTables has redrawn the table' );
            this.api().columns().header().each(function(o, i){
                var width = $(o).outerWidth();
                var column = this.column( i );
                //console.log(column.footer());
                //$( column.footer() ).css('width',(width-10)+'px');
                $( column.footer() ).css('width',$(o).css('width'));
                $( column.footer() ).css('padding-left',$(o).css('padding-left'));
                $( column.footer() ).css('padding-right',$(o).css('padding-right'));
                $( column.footer() ).css('border-left',$(o).css('border-left'));
                $( column.footer() ).css('border-right',$(o).css('border-right'));
            });
            
        },
        "columnDefs": [
           // { "width": "335px", "targets": 15 },
           /* { "width": "40px", "targets": 1 },
            { "width": "100px", "targets": 2 },
            { "width": "70px", "targets": 3 },
            { "width": "70px", "targets": 4 },
            { "width": "70px", "targets": 5 }*/
        ],
    });
    oTable.columns.adjust().draw();

I cannot seem to get the headers to align with the body

shorif2000

I updated the css and js sources jsfiddle.net/shorif2000/UvjnT/1166/ seems to work now