Colvis and FixedHeader Misaligns

Webbly

I am using the colvis button and have a fixed header on my table.

However whenever I remove some columns the headers and cell become unaligned.

This is my code:

$(document).ready( function () {
    $('#profitTable').DataTable({
        dom: 'Bfrtip',
        buttons: [
                'colvis', 'csv', 'print'
        ],
            paging: false,
        scrollY: '75%',
        scrollCollapse: true,
        sScrollX: "100%",
        bScrollCollapse: true
    });
});

Here is a fiddle

Could I fix it by forcing the columns to align left?

kthorngren

First I don't see where you have fixedHeader enabled. The fixedHeader docs state that it is not compatible with scrollX and scrollY.

If you are not using the fixedHeader extension then a test case showing the issue is needed.

Kevin

Webbly

I may just been incorrect with how I am describing things.

It may be default but the <thead> always stays at the top of my page. Is that not fixed header?

kthorngren

It may be default but the <thead> always stays at the top of my page. Is that not fixed header?

It maybe that you have a fixed header without using the fixedHeader extension. Its not default for the header to stay at the top of the page thus the need for the extension :-) Like I said if you aren't using the fixedHeader extension then a test case showing the problem is needed to troubleshoot. The initialization code you posted is not enough to look into your issue.

Kevin

allan

Add width="100%" to the table element: https://jsfiddle.net/nmu23b83/1/ .

The key here is that if you don't do that the individual table components will only take up the width they need, and they have margin: 0 auto; in their CSS - hence why they look misaligned.

Allan