DataTables 3.1.2 - FixedHeader column widths become misaligned with Responsive

tenobe4350

Hi,

I'm experiencing a column alignment issue with DataTables 3.1.2 when using FixedHeader together with Responsive.

My table contains a large number of columns. When the table is initially displayed, everything is correctly aligned: the table header and body columns have the correct widths.

However, when I scroll down and FixedHeader becomes active, the floating/fixed header is no longer aligned with the table.

The actual table columns keep their correct widths, but the FixedHeader floating header calculates different widths, causing the <th> elements in the fixed header to no longer line up with the corresponding columns in the table body.

The issue is particularly noticeable when there are many columns and Responsive is enabled.

The behavior is:

1 - The page loads and the DataTable is correctly aligned.
2 - Responsive determines which columns should be visible.
3 - The table header and body are correctly aligned.
4 - I scroll down.
5 - FixedHeader becomes active.
6 - FixedHeader calculates the widths of its floating header.
7 - The calculated widths don't match the widths of the original table.
8 - The floating header therefore becomes horizontally misaligned with the table body.

It looks like the FixedHeader width calculation in DataTables 3.1.2 is not using the final column widths from the original DataTable layout, particularly when Responsive is also managing a large number of columns.

The important thing is that this behaviour did not occur in previous versions. With the older DataTables versions, the FixedHeader remained correctly aligned with the table.

I'm currently using:

DataTables: 3.1.2
FixedHeader
Responsive

Example configuration:

new DataTable('#example', {
responsive: true,
fixedHeader: true
});

Could this be a regression in DataTables 3.1.2, specifically in the way FixedHeader calculates or copies the column widths when it becomes fixed?

It seems that the original DataTable has the correct widths, but the cloned/floating FixedHeader does not receive or calculate those same widths correctly.

I would appreciate any advice on how to make FixedHeader use exactly the same column widths as the original table, or whether this is a known issue in DataTables 3.1.2.

Thanks!