Responsive design

Hi,

thanks for your question.

Making tables responsive is difficult in general, but there’s an idea that I have implemented in a so-called TablePress Extension. Please see https://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.

Regards,
Tobias

Tobias,

Have you seen this article regarding responsive tables?

FooTable: a jQuery Plugin for Responsive Data Tables

Hi John,

thanks for that link!
Yes, that looks like a nice approach, but I’m afraid that it is not really going to work for TablePress. Users create so many different tables, that the default configuration of this won’t do it. And to change the configuration, it seems to require many changes in the HTML code of the table, which would be hard to implement while keeping them manageable. Also, I’m reluctant to add another JavaScript library, as that is very likely going to interfere with the JS for the sorting, search, and pagination. The approach in the Extension from the link above does not have this drawback, as the features will still work nicely (as it is CSS-only).

Regards,
Tobias

Thanks for the effort but this isn’t going to work for our agenda. https://mobilemarchtc.com/agenda/ Though it puts the table on it’s side, it still extends way beyond the bounds of the screen. While CSS only is ideal, I’m not sure how it would really accomplish a truly responsive table.

I like the concept that John noted from Foo Tables. However, I’m not nearly the coder you guys are. Without a plugin, I’d need a ton of hand-holding.

Tobias, thanks for the efforts and the great TablePress plugin. I’ll continue to poke around. I’ll need to find something. Having and agenda for a mobile conference that can’t be read on a device is a problem.

Cheers!

Phil

Hi Phil,

yeah, for a table like that, the approach in the Extension will not really work (it doesn’t look good for one, and the combined cells can cause technical trouble).
Unfortunately, I don’t see a quick and easy solution for you here. As the table is not a table with “tabular data” (like numbers or similar), you might need to consider a different kind of markup (e.g. HTML <div> elements), which you can then style easier with CSS.

Regards,
Tobias