Hi,
thanks for your question.
Making tables responsive is difficult in general, just from their nature. This is something that all tables on the web suffer from.
One idea that I have implemented in a so-called TablePress Extension is flipping and scrolling. Please see http://tablepress.org/extensions/responsive-tables/ for more information. This Extension will use some CSS code, wrapped in media queries, to basically flip the table to the side on small screens and add a horizontal scrolling feature.
It will probably not be the best approach for your table, so you could also use just the horizontal scrolling, from https://wordpress.org/support/topic/responsive-tables-scroll-only?replies=6#post-5511954
Now, as you are more using the table for styling purposes (instead of presenting tabular data), it might also be worth checking out not using a table here at all, but plain HTML or maybe a gallery plugin.
Regards,
Tobias
Hi Tobias, thanks. While after using the extension plugin I no longer get an error message when using the mobile friendly test, when I check the table on my smartphone I see that the table is messed up!
I discovered however that, when I check the “horizontal scrolling” setting, I get a good display on my smartphone, as well as no errors with the mobile test.
My question is, is there a way to enable the horizontal scrolling feature, without having to enable the “table head row” checkbox? I don’t need it for the particular table I am working on.
If that is no option, my other back up solution is to use a gallery plugin instead as you suggest. Is there a particular one you would recommend that would be responsive?
thanks!
nicos
Hi,
yes, that’s what I meant. The Responsive Tables Extension is only good for tables with tabular data, but not those that are used to layout images.
The “Horizontal Scrolling” checkbox is a solution, but it requires a table header row, as it’s based on the DataTables JS library, which has this requirement.
Instead of using that, please try the approach from my link above. That’s a Horizontal Scrolling that does not need the DataTables JS library (to use it, turn off “Horizontal Scrolling” and the header row on the “Edit” screen again).
Regards,
Tobias
Hi, just to confirm, should I use the following code from your link:
<div class=”tablepress-scroll-wrapper”>
[table id=123 /]
</div>
and then “Custom CSS” like
.tablepress-scroll-wrapper {
overflow-x: auto;
overflow-y: hidden;
}
should I just put all of that code in the plugin options custom css window and it should work?
Hi,
correct. The first part has to go into the post/page where you are already showing the table, and the CSS has to go into the “Custom CSS” textarea. Additionally, turn off “Horizontal Scrolling” on the “Edit” screen and the “Table Head” checkbox (unless you want that now).
Regards,
Tobias
Yes, it worked! thanks a million Tobias!
Hi,
no problem, you are very welcome! 🙂 Good to hear that this helped!
Best wishes,
Tobias
Tobias, I’m trying to sort out a similar issue following updating our site that was previously mobile friendly. I’ve tried using the extension with the “scroll” function and the home page doesn’t seem to have improved. The home page is:
http://www.scalepreventionusa.com
I’d appreciate any advice you can provide.
Thanks
David
Hi David,
I don’t see a TablePress table on your site. Can you guide me?
Regards,
Tobias
