TablePress Responsive Plugin Issues

Hi,

thanks for your post, and sorry for the trouble.

The reason for these issues is some extra HTML code (this might actually also be the reason for the gray background color issue from the other thread).
Namely the Shortcode is wrapped in HTML <pre> tags. To fix this, please go to the “Edit” screen of the page, and switch from the “Visual” to the “Text” editor.
There, remove the <pre> and </pre> around the Shortcode, so that there’s only the Shortcode on its own line, with an empty line before and after it.

Regards,
Tobias

Hi,

well, the responsiveness approach of the Extension is working technically. It’s jus not an approach that is well suited for your tables, which mainly show images in the tables.

If you look at the example on the page http://tablepress.org/extensions/responsive-tables/ you can see that the table is flipped to the side and made scrollable. This works very well for tables with text or numbers in them, as those don’t take up much space and all have the same size. The approach of flipping&scrolling does however not work well in cases like yours, with images in the cells that result in different row heights.

The difference between the siding and decks pages basically is the different Shortcode parameter value (all instead of phone).

Now, as your tables contain images, I’d like to suggest a different solution: Let’s only use Horizontal scrolling, without the flipping.
For that, please remove the responsive parameter from the Shortcodes again (use the text editor not not accidentally add those <pre> tags again), and then try this:

Add an extra <div> wrapper around the Shortcode, like

<div class="tablepress-scroll-wrapper">
[table id=123 /]
</div>

and then add this to the “Custom CSS”:

.tablepress-scroll-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
}

Regards,
Tobias

Hi,

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

Best wishes,
Tobias