Responsive or add Scroll Bars

Resolved FuturityWeb
(@futurityweb)

9 years, 10 months ago

Hi Tobias

I have a broad table which I wanted to be responsive. I tried the ‘responsive-tables’ add-on, but this makes the table look terrible in normal view (on PC or notebook).

My table sample can be viewed here:
http://www.seasafetytraining.co.za/test-schedule-layouts/

Please help with code to add to Custom CSS which will allow me to add horizontal scroll-bars to the table(s) when the screen size is smaller.
There will be several tables on this site, in the same format…

Thx
Duane

https://wordpress.org/plugins/tablepress/

Viewing 5 replies - 1 through 5 (of 5 total)

Plugin Author TobiasBg
(@tobiasbg)

9 years, 10 months ago
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
Thread Starter FuturityWeb
(@futurityweb)

9 years, 10 months ago

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
Plugin Author TobiasBg
(@tobiasbg)

9 years, 10 months ago
Hi Duane,

yes, that should be possible by replacing
```
overflow-x: scroll;
```
with
```
overflow-x: auto;
```
Regards,
Tobias
Thread Starter FuturityWeb
(@futurityweb)

9 years, 10 months ago

Hi Tobias

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

Rgds
Duane

Plugin Author TobiasBg
(@tobiasbg)

9 years, 10 months ago

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!

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Responsive or add Scroll Bars’ is closed to new replies.

Tags