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

Abvolt

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.

Reluctance

Is there any workaround to get the same effect without using scroll – Abvolt

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/

Timberhead

I have tried this however the alignment seems to be off if zoomed at different. try set browser zoom to 110% reload page and look at the 1st couple of columns (IE/chrome). In chrome the top header row drops down to make 2nd row at 110% – Abvolt

it looks to me, its not picking up the decimal width figure. 1st column is 169.43px but it only picks up 169 – Abvolt

Answer 3

$('#datatable').DataTable().columns.adjust().draw();

This fix worked for me. Also enable ScrollX

Senecal

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Aby