FixedHeader multiple tables header positioning issue

FixedHeader multiple tables header positioning issue

_gurk__gurk_ Posts: 2Questions: 1Answers: 0

Link to test case:
Debugger code (
Description of problem: As you scroll down the page the fixed headers go out of sync, and the wrong table header is displayed above table in focus. Issue appears most times, but sometimes after adjusting page width the issue goes away. Experienced in Chrome, not tried other browsers yet. Am I doing something wrong, or is this a bug?

Many thanks,

This question has an accepted answers - jump to answer


  • allanallan Posts: 56,849Questions: 1Answers: 9,035 Site admin
    Answer ✓

    Hi Graeme,

    That's a really interesting one. If you were to initialise the tables in the same order as they are in the HTML, it would work. But since you aren't, what is happening when the DataTable initialisation is run it is adding styles to the tables, which changes the position of the lower tables on the page (e.g. adding padding to the header cells, etc).

    That in turn means that the position they worked out that they were on the page is no longer correct (it doesn't listen for DOM mutations).

    What you could do is call fixedHeader.adjust() on all the tables once they have been initialised:

        .tables( { visible: true, api: true } )

    Thanks for the test case!


  • _gurk__gurk_ Posts: 2Questions: 1Answers: 0

    Hi Allan,

    That explains why the issue seemed new, as I only recently adjusted html ordering, but never suspected that to be the cause.

    Handy to know I can force a "re-initialisation" via the adjust method, good tip.

    Thanks for the support!


Sign In or Register to comment.