Datatables `width: 100%` being overwritten by `scrollX : true`

regexj

Hello,

I have an issue with Datatables not setting the width as expected. Please view the image below.

The Datatable does not set the width to 100%. I have set the CSS up correctly as far as I know - everywhere says that simply setting the table width as 100% will have Datatables mimic that and set to 100%. I believe it is being overwritten by scrollX : true.

HTML (Twig) (I cannot get the forum code formatting to work over multiple lines, so code shown in images)

CSS (SASS)

jQuery Datatables initialisation

Inspect Element

My theory
I have set scrollX : true which is redefining / overwriting the width of the Datatable.

My only problem is that I have to keep that setting there as the http_user_agent value can be very long and stretch the table far outside of the view it's meant to be within. So while this user may have a thin table as above, the next user may have a wide table that stretches far outside the view, or simply the user viewing the page has a smaller screen and so even this content would outstretch the view. This page - a user management page - multiple Datatables all created dynamically through twigs. Some of the tables have 100 or so columns, some have 4. In order to keep the view pretty I need all tables to be the same width, i.e. 100% of the div they are contained within. I also need a scrollX setting to be applied to all, even where the table may possibly not have enough content to stretch the full width of the page as the content within the tables is dynamic and can be short or long depending on how the user has interacted with the site.

Any help is much appreciated.

Cheers,
Joe

allan

Hi Joe,

Add width="100%" or style="width: 100%" to your table tag.

The reason is, using just a stylesheet provided CSS width is virtually impossible to read as a relative percentage in Javascript (easy with pixels, but % - not so much!). Adding that attribute let's DataTables see it.

Allan

regexj

Hi Allan,

Thank you very much! That has fixed the issue.

Cheers,
Joe