Column misalignment ONLY at first time (or reload)

edm

After using scrollY with "50vh", the column headers have not the correct width (after loading or reloading). When i reorder (mouse click on the header) the table or resize the window, the width of the column headers have been corrected (Firefox and IE 11). How can i fix that? Using DataTables 1.10.16. (Website is protected, user name and password with PM?)

allan

Two things to check:

1. Add width="100%" to the table
2. If the table is initialised while it is hidden, use columns.adjust() when it is made visible.

Allan

edm

Oh, yes. I hide the page (with display:none for the wrapper container) and show it with jquery after the whole content was loaded (to avoid flickering). With columns.adjust() it's correct. But i had to use it inside of setTimeout. Without setTimeout, it won't work.

Thank you very very much.

Eduard

edm

Hello Allan,

what's about real scrollable tables (without the div stuff around etc)? Using "overflow: auto;" or Flexbox. Something like this:

jsfiddle.net/doctorDestructo/x54uraaq/

HTML table with fixed headers? -> A More Refined Pure CSS Scrolling Table
https://stackoverflow.com/a/25818428

CSS Only Fixed Table Headers
https://codepen.io/tjvantoll/pen/JEKIu

How to add a scrollbar to an HTML5 table?
https://stackoverflow.com/questions/17584702/how-to-add-a-scrollbar-to-an-html5-table

CSS-Only Scrollable Table with fixed headers
https://stackoverflow.com/questions/11891065/css-only-scrollable-table-with-fixed-headers

Table scroll with HTML and CSS
https://stackoverflow.com/questions/14834198/table-scroll-with-html-and-css

allan

A CSS only solution is my dream for this. And perhaps with the next major version of DataTables I'll be able to do that - but at the moment all of these options either don't work with horizontal scrolling, or they don't work with older browsers.

Allan