header change size on scroll

[ektarum]

Hi,

With large tables, header change size on scroll.

And the floating header doesn't scroll horizontally.

example : https://jsfiddle.net/4kq6hv53/

[ssc-hrep3]

I have the exact same problem here. The flloating header has only the same width if the data itself does not stretch the table. If the browser decides to ignore your width specification and calculates its own width, the fixed column header does not work anymore.

That said, it unfortunately cannot be used currently with large data tables.

[DataTables]

I've fixed the issue with the horizontal scrolling (7046ea) but I'm struggling to reproduce the issue with the resizing with the given test case. Could you elaborate on how I can do that?

[ektarum]

Thanx for the fix.

For the bad size header, i've update the jsfiddle : i've make a big string for you can see better the problem.

You can see the header column misalignment with body table in the link https://jsfiddle.net/4kq6hv53/2/

[joe-meyer]

Ya this is currently a blocker for me to implement the fixed headers in what I've been working on. @DataTables is there anything else (short of proposing a solution) we can do to help you narrow this down?

[DataTables]

There are still a couple of separate issues that need to be addressed before this can be properly closed I think:

• Update header sizes on page change / filter, etc
• Misalignment on entering the floating state when not scrollLeft: 0

[DataTables]

Commits 1efdab2558f39c3548169283589b2750802abcae 423aa1f18b536fe5ec57aadb7e43f0386c2dda36 and 0a2631c5c85ff29857fb12242837a3ab93bff34c complete the changes needed to address this issue.

This is an updated fiddle that uses the nightly with the fixes.

The primary issue here is that the browser collapses the table width if it is larger than 100% of the viewport because of the width:100% on the table, despite the column widths giving different sizes. The result is that when the header is floating it is no longer constrained by the body content, so even although the widths assigned are identical the browser's table layout results in different column widths.

There are two ways to address this:

1. The approach I've taken which is to have FixedHeader recalculate the columns width on each draw, even although they already have widths assigned.
2. Remove the width:100% on the table and allow DataTables to fix its width to a pixel value.

The downside to option 1 is that the table is collapsed (width-wise) as far as possible when scrolling. I've yet to figure out a way of addressing that - probably it will need the header to be reinserted into the table before the draw, and then pulled out again.

For the moment, at least everything is aligned, and there is a workaround if you need to force the width.

[ektarum]

hi !

thanks for your feedback, i click in your fiddle link but it's the same of mine and i haven't see difference.

[DataTables]

Oops - forgot to save the fiddle: https://jsfiddle.net/4kq6hv53/3/ .

[ektarum]

thanx for correction :)