Table Header Row Width

Hi,

thanks for your post, and sorry for the trouble.

This can happen when “Horizontal Scrolling” is used with a table that is then shown in a tab.
The reason for this problem is that, with tabs, only the first table is shown when the page is loaded. The tables on the other tabs are hidden.
This however means that the browser can not calculate things like column widths for these tables (because hidden elements don’t have a width, so to say). This results in the widths to look wrong.

For a possible solution, please see https://www.ads-software.com/support/topic/tables-within-elementor-components-tabs/

Regards,
Tobias

Hi Tobias,

Thanks for your speedy reply! I have tried all of those JS instances and it still doesn’t appear to be working ??

Thanks,
Katie

Hi Katie,

Can you please try again after removing the first line of that code? It’s causing an error here (due to the code loading order), but shouldn’t actually be needed.

If that still doesn’t help, I suggest that you consider getting a TablePress premium license. As part of the priority email support that is included, I’ll then be able to take a deeper look at this on your specific site.

Best wishes,
Tobias

Hi Tobias,

What would the code be, as there’s multiple on that other ticket…

Thanks a lot,
Katie

H,

please try this: https://www.ads-software.com/support/topic/tables-within-elementor-components-tabs/#post-16528272

In your case, it should be fine to also remove the line

$('.elementor-tab-content .dataTable').DataTable({retrieve:true}).columns.adjust().draw();

from the code.

Regards,
Tobias