Issue with responsive

tHi,

thanks for your post, and sorry for the trouble.

Unfortunately, your link is not working for me, I only get a “404 Not found” error. Is this really a published page?

Regards,
Tobias

Hello,

Sorry, I removed it. It’s back live ??

Hi,

thanks! It seems that the Shortcode is either in a “Preformatted” block instead of a “Shortcode” block (if you are using a block editor for this page), or, if you are using more of a code editor, there are HTML <pre> and </pre> tags around the Shortcode. Could you please remove those?

Regards,
Tobias

Well, it’s strange, I’ve never done such a thing and I don’t use a “block editor”. Any idea how I could remove the thing ? As I don’t feel like I’ve added anything, I have no idea how to remove it :/

Ok, so, I don’t know what happened but, indeed, there were some “Pre /pre” in the code.

I’ve removed them, but issue is still the same ?? Really not responsive on my phone…

Hi,

please add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

.tablepress {
  table-layout: auto;
}

With this, we can override a theme setting that is causing the shrinking of the table.
After that, the table should be horizontally scrollable.

Regards,
Tobias

Amazing, it worked !

Would this work here too : https://the-bestvpn.com/

I don’t really like the fact that the 8 columns all appear on my desktop…as it makes each of them very small.

If I add table-layout:auto and then define each column to be 200px (for instance) will the last ones be hidden before the scroll to the right ?

Thank you a lot for your help,

Regards,

FP

I’ve added it and set all 8 columns to 200px…but unfortunately, does not seem to work ?? The columns are definitely not 200px wide :/

Hi,

if you want the columns to be bigger, you could increase the padding and/or font size. Just increasing the column widths will not really work, as the browser does not actually want to do that (it wants to keep the table visible).

You might also want to experiment with other options, e.g. from https://tablepress.org/extensions/responsive-tables/

Regards,
Tobias

I’ve tried to use that extension, but unfortunately, it did not work as presented on the page https://tablepress.org/extensions/responsive-tables/.

I mean, when I use the “scroll” mode, it will still display the 8 columns on the page.

Yet, on the exemple, in scroll, columns don’t go on 2 lines, they just take the width of the text in it, and if it’s too much, then the following columns get out of range and you need to start scrolling to see them. That’s the effect I’d like, but unfortunately, it does not work, and instead of keeping the table’s header on 1 line and have the column width take the correct size, it puts the text on 2/3 lines in order to make all 8 columns fit the screen size. I don’t know if I’m clear in the explanation, sorry :$

Hi,

please add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

.tablepress-id-1 thead th {
  white-space: nowrap;
}

The cells in the header will then not get automatic line breaks (you have to press “Enter” at the desired places to get them, if needed). With that, the table should be wider.

Regards,
Tobias

Awesome, this works just fine !! ??

Hi,

no problem, you are very welcome! ?? Good to hear that this helped!

Best wishes,
Tobias

P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!