Responsive Design

Hi,

thanks for your post, and sorry for the trouble.

No, there’s nothing really that can be done about this, unfortunately, as this simply is how tables work. They have a fixed column structure, and the text in the table cells simply needs space, as the browser can not simply add word-wrapping in the middle of a word.

You could however try an approach like in this TablePress Extension: https://tablepress.org/extensions/responsive-tables/ where the table is flipped to the side and then you can scroll it.
Another choice would be to make it scrollable now, by adding this to the “Custom CSS” textarea on the “Plugin Options” screen:

#tablepress-31_wrapper {
  overflow-x: scroll;
  overflow-y: hidden;
}

Regards,
Tobias

Once again, absolutely brilliant support
I love both your solutions
Thank you

Hi,

no problem, you are very welcome! ?? Always glad when I can help!

Best wishes,
Tobias

Hi Tobias

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

My table sample can be viewed here:
https://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.
NOTE: There will be several similar tables on various pages, each requiring scroll bars.

Thx
Duane

Sorry, I will open a new thread for this request. Just noted this one is marked as resolved!

Hi,

yes, let’s handle this in a new thread. We should basically just have to adjust the CSS selectors.

Regards,
Tobias