Responsive or add Scroll Bars

Hi,

thanks for your question, and sorry for the trouble.

For this, I suggest to first turn off the TablePress integration in the FooTable plugin that you are using, as that is making things more complicated here.

Then, you’ll need to add a wrapper HTML element around the table Shortcodes:

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

(with the table ID adjusted for each table).

Finally, you can then use this “Custom CSS”:

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

Regards,
Tobias

Hi

The Footable Plugin was added in an attempt to get the tables responsive and it did not work. I have deleted this plugin.

I added the wrapper HTML element and Custom CSS and the horizontal scroll bar is visible – Thank you ??

Next Question: Is there a way to hide the scroll bar and make it reappear only when needed (eg. on a smaller screen)?

Thx
Duane

Hi Duane,

yes, that should be possible by replacing

overflow-x: scroll;

with

overflow-x: auto;

Regards,
Tobias

Hi Tobias

It’s working 100% – THANK YOU ??
You support is phenomenal…

Rgds
Duane

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!