Headers are not align with content while scrolling

I have seen similar issues here already but not quite the one that I am experiencing. When I have a table and the page loaded with all the content everything is well aligned, as soon as I start moving the X Scroll the header doesn’t go along with the columns:

All good initially:

When scrolling:

My javascript: $("#logs_tabulator").tabulator({ height: "500px", pagination: "remote", ajaxURL: '/list', columns:[ {title:"id", field:"id", sorter:"string", width: "5%"}, {title:"date", field:"date", sorter:"string", width: "15%"}, {title:"level", field:"level", sorter:"string", width: "10%"}, {title:"action", field:"action", sorter:"string", width: "10%"}, {title:"entity", field:"entity", sorter:"string", width: "20%"}, {title:"message", field:"message", sorter:"string", width: "30%"}, {title:"user", field:"user", sorter:"string", width: "15%"}, {title:"exception_code", field:"exception_code", sorter:"string", width: "10%"}, {title:"exception_line", field:"exception_line", sorter:"string", width: "10%"}, {title:"exception_file", field:"exception_file", sorter:"string", width: "20%"}, {title:"serialized_entity", field:"serialized_entity", sorter:"string", width: "20%"}, ], });

I am not sure if this is a bug or what… I have tested this on Chrome Version 54.0.2840.99 m (64-bit) and also on Firefox 50.1.0

One thing that I just noticed while writing this is that this only happens if I use the Width property, for the sake of testing I removed the width of all columns and manually expanded all the columns so that the X scroll appeared and when I scrolled then it did not happen.

Any ideas?

[olifolkerd]

It appears to be an issue with percentage widths, i will have a look into it this evening for you

[bvisonl]

sure:

$("#logs_tabulator").tabulator({
                height: "600px",
                pagination: "remote",
                paginationSize: 20,
                movableCols:true,
                persistentLayout: true,
                persistentLayoutID:"abcdefehijklmn",
                ajaxURL: "/list"
                columns:[
                    {title:"Id", field:"id", sorter:"string", width: "5%"},
                    {title:"Date", field:"date", sorter:"string", width: "15%"},
                    {title:"Level", field:"level", sorter:"string", width: "10%"},
                    {title:"Action", field:"action", sorter:"string", width: "10%"},
                    {title:"Entity", field:"entity", sorter:"string", width: "20%"},
                    {title:"Message", field:"message", sorter:"string", width: "30%"},
                    {title:"User", field:"user", sorter:"string", width: "15%"},
                    {title:"Exception Code", field:"exception_code", sorter:"string", width: "10%"},
                    {title:"Exception Line", field:"exception_line", sorter:"string", width: "10%"},
                    {title:"Exception File", field:"exception_file", sorter:"string", width: "20%"},
                ],
            });