Option scrollX displays a scrollbar with hidden initialization.

AlphaR

I have table on my page which loads up to 10.000 entries. To speed up page loads I hide the div containing the data and display it only when the dataTable is initialized. My dataTable has "scrollX" enabled because it can display a lot of columns as well. The table also tries to fill the screen horizontally with a maximum width per column. This appears to be a default setting. However, this leads to a problem.

When I show enough columns to make them fill the page horizontally they align their width so that the table can be shown without a horizontal scroll bar. I like this behavior! However, due to me showing the table only after it is initialized, the column width does not take the vertical scroll bar of the browser window into account, which does not exist before the table is shown, but afterwards, because the table overflows the page vertically. This leads to the table getting a horizontal scrollbar, always hiding exactly the width of the vertical scroll bar in size. I tried dt.columns.adjust().draw(); to no avail.

My attempt at solving this is to generate a lot of empty rubbish html to force the page to have a vertical scroll bar before I show the table, so it can take the scroll bar into consideration. After showing the table, I remove the additional rubbish html. This works, but it is extremely ugly.

Is there any other way to force my table to calculate its ideal width after initialization and get rid of the scoll bar?

kthorngren

Do you have style="width:100%" on your table tag as shown in this example:
https://datatables.net/examples/basic_init/flexible_width.html

Kevin

AlphaR

No, I didn't. Now that I added it, it works.
Thanks for the simple solution!