jquery datatables fixed columns not aligning in IE

Question

If you check in IE 10 the fixed columns does not align with body rows whilst scrolling down, in chrome when you scroll right to bottom the fixed column does not align with the body.

I have tried playing around with the following css, but its not working. could it be the borders and padding I have on the table?

.DTFC_LeftBodyLiner{
    top: 2px !important;
}

jsfiddle

UPDATE

I have updated it without the scrollx/y and fixed columns. however the floating header still does not line up

UPDATE with @Dekel code

https://jsfiddle.net/a1mrp2k8/1/ when zooming the header columns drop row

Answer 1

Extension FixedHeader is not compatible with scrolling features according to the author of jQuery DataTables.

From the official documentation:

Please note that FixedHeader is not currently compatible with tables that have the scrolling features of DataTables enabled (scrollX / scrollY). Please refer to the compatibility table for full compatibility details.

Answer 2

I managed to have a fix for Chrome & Firefox.
This solution also works in IE 10&11 (but only on the second time you scroll up&down. Still trying to fix this one...).

The general idea is to take the width/height values of the original header and set them to the new "fake" header that the fixedHeader extension is creating.
Your problem is that because it's a table and the content of the cells affect all of the positioning - you can't just clone the headers-rows (because their width will not be the same), and if event if you set the correct width on each cell - the table layout can change them, so we must change the layout of the cells to display: inline-block.

Add this to your js file (after creating the datatable):

$(document).on('scroll', function() {
    if ($('table.dataTable.fixedHeader-floating').length > 0) {
        if ($('table.dataTable.fixedHeader-floating').data('header-fix') == 'done') {
            return;
        }

        float_ths = $('table.dataTable.fixedHeader-floating th');
        $('table.dataTable thead:eq(0) th').each(function(i) {
            float_ths.eq(i).width($(this).width());
            float_ths.eq(i).height($(this).height());
        })
        $('table.dataTable.fixedHeader-floating').data('header-fix', 'done')
    }
});

Add this to your CSS file:

table.fixedHeader-floating th {
    display: inline-block;
    height: 100%;
}

Here is a working version:
https://jsfiddle.net/9n6zty8t/