Hi!
Thanks for your post and sorry for the trouble!
Can you please send me a link to the page with the table where this problem happens, so that I can take a direct look? Thanks!
Regards,
Tobias
Hi,
thanks for that! I’m not exactly sure, but I believe that the min-width CSS assignment to some columns might play a role here. Please try extending that to
min-width: 135px;
width: 135px;
It’s also possible that the border lines might play a role here somehow.
I’m also trying an improvement for the width calculation that will be part of TablePress 3.1 that will be available very soon, which might also solve this.
Regards,
Tobias
I don’t think it is just ‘min-width‘
It’s more like that ‘Enable horizontal scrolling…’ is making two different tables from original one and then width resizing is calculating separately.
In code there is two divs with classes ‘dt-scroll-head’ and ‘dt-scroll-body’, but when this function is off there is no divs and only ‘thead’ and ‘tbody’ and it is one table.
-
This reply was modified 1 year, 3 months ago by
arekmit.
Hi,
yes, that’s what’s happening from a technical point of view. A second table is created “on top” of the normal table, but they are kept in sync using JavaScript code. So, this is the intended behavior.
(By the way: The Responsive Tables feature module of the TablePress premium versions also offers a different implementation of Horizontal Scrolling that would not show this problem.)
Here, this “keeping in sync” is not working properly, due to different factors influencing the widths calculations. That’s why I suggested an adjustment in the CSS code.
Best wishes,
Tobias
I experienced this “keeping in sync” problem not only on this webpage. I saw it on some of my other projects.
Where should I add this CSS code?
Hi,
you already have this CSS code in your “Custom CSS” text field on the “Plugin Options” screen of TablePress, so that’s where you should update it.
Best wishes,
Tobias
This CSS didnt’t help.
I checked now that resizing browser window making this ‘header table’ jump and sometimes sync with ‘content table’.
Hi,
where did you change the CSS? I’m still only seeing the old CSS code in the “Custom CSS”?
And yes, the resizing of the browser will trigger a recalculation.
Best wishes,
Tobias
I deleted it because it affected other tables.
Added again only for the first table.
Hi,
ah, I see. You are indeed applying this CSS to certain columns of ALL tables at once, which is not recommended. Instead, you could use an “Extra CSS class”, if you want to group tables.
Your CSS code to only target an individual table is also slightly off. Instead of
#tablepress-14_wrapper .tablepress .column-2,
...
the CSS selector needs to be
.tablepress-id-14 .column-2,
...
Best wishes,
Tobias
Fixed CSS code but it still didn’t helped.
Hi,
can you test this with CSS code for table 12 and not table 14, because I see table 12 with this problem in your link.
Best wishes,
Tobias
Added CSS for table 12 too.
But for me every table with ‘Klasa 1’, ‘Klasa 2’,… have this problem.
Hi,
hhm, ok… Unfortunately, I can’t see why this is still happening 🙁
I suggest that we try again with TablePress 3.1 which will be released next week, and which has a mechanism that can maybe prevent this from happening. Otherwise, I can only recommend to upgrade to TablePress Pro, which comes with a different implementation of horizontal scrolling that will not suffer from this problem.
Best wishes,
Tobias
