[table id=123 responsive=scroll /]

Hi,

thanks for your question, and sorry for the trouble.

To make these work, you must download, install, AND activate the TablePress Extension from https://tablepress.org/extensions/responsive-tables/ as a WordPress plugin. That doesn’t seem to be the case on your site.

Regards,
Tobias

Hi Tobias,

I had done all that already. That’s why ‘collapse’ works. ‘Collapse’ wouldn’t work if that hadn’t all already been done.

Cheers,
Tony

Note, I also have ‘Horizontal Scrolling’ enabled, in the section ‘Features of the DataTables JavaScript Library’.

In fact, all my enabled options are as follows:

TABLE HEAD OPTIONS
Enabled: Table Head Row
DISABLED: Table Foot Row
ENABLED: Alternating Row Colours
ENABLED: Row Hover Highlighting
DISABLED: Print Table Name
DISABLED: Print Table Description
Extra CSS Classes: (None)

FEATURES OF THE DATATABLES JAVASCRIPT LIBRARY
Enabled: Use DataTables
Disabled: Sorting
Disabled: Search/Filtering
Disabled: Pagination
Pagination Length Change: N/A
Disabled: Info
Enabled: Horizontal Scrolling
Custom Commands: (None)

PUGIN OPTIONS: FRONT END OPTIONS
Custom CSS: (None)

I hope this helps.

Cheers,
Tony

Hi,

ah, thanks! When I first checked, I somehow had the impression from the source code that the Extension was not being active.

The cause for the problem is some theme CSS due to which the browser will add word-wrapping instead of letting the table scroll. To turn that off, please add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

.tablepress {
  word-break: normal;
}

In addition, please turn off the “Horizontal Scrolling” checkbox (and then the “Use DataTables” checkbox as all features are turned off already), as we are adding this feature via the Shortcode parameter.

Regards,
Tobias

Thanks, Tobias, but that still hasn’t fixed the issue, I’m afraid.

(1) I copied-and-pasted the above script, exactly as it appears, into Custom CSS on the Plugin Options screen.
(2) Then, I turned off Horizontal Scrolling.
(3) Then, I turned off Use Data Tables.
(4) Finally, I cleared my browsing history on my iPhone and it still won’t scroll.

Any ideas what else the issue could be that’s stopping the extension from scrolling left to right?

Cheers,
Tony

Hi Tony,

it seems like the TablePress CSS files are not updating properly on your site, probably due to file access rights on the server.
Could you therefore please log in via FTP and delete the three files

/wp-content/tablepress-custom.css
/wp-content/tablepress-custom.min.css
/wp-content/tablepress-combined.min.css

on your server and then save the “Custom CSS” again?

Regards,
Tobias

Hi Tobias,

Okay, I tried that too but still no luck, I’m afraid.

I approached the provider for my server and showed them your message above. They complied and deleted the three files via FTP as requested.

I then returned to Table Options and saved the Custom CSS again.

Finally, I cleared the history and website data on Safari to see if the table will scroll left-to-right on my phone and it still won’t, unfortunately.

Does the plugin have any known conflicts with any of the following?
Genesis Authority Pro theme
AddToAny Share Buttons
Akismet Anti-Spam
Bluehost
Contact Form 7
Contact Form 7 MailChimp Extension
Genesis 404
Genesis Custom Footer
H5P
Hummingbird
Jetpack by WordPress.com
MailChimp for WordPress
No Self Pings
Open external links in a new window
Redirection
Smush
Strong Testimonials
WPForms Lite
Yoast SEO

Or, could it be something else?

Cheers,
Tony

Hang on, Tobias. My graphs have changed; they’re better now!

There are two Tablepress graphs I’m looking at. The second one I haven’t told you about yet. The second one is in a draft blog post which gets published next week. Previously, that graph (which I can’t show you until it’s published) has 50 words (or phrases) in the left column and their lengthy definitions in the right column. Previously, the left column was squashed so narrow that each word in that column had to be read vertically, with only one letter per line when viewed on a mobile phone. Now that has changed. Now the left column is wide enough that a whole word fits on one line and can be read horizontally. This is a good enough solution for me.

I thought ‘Scroll’ would add a horizontal scroll bar, so columns would not be squashed skinny. For example, in this first table in the blog post we’ve been discussing here in this support thread, you can see on your mobile phone that there are phrases in each of the three columns which are spread over 1-4 lines within their cells. I had thought ‘Scoll’ would add a scroll bar so readers can scroll left-to-right.

While there is no scroll bar, I’m satisfied that the second table in the not-yet-published blog post is now making the left column wide enough that the words don’t need to be read vertically anymore.

Thank you for your help.

Cheers,
Tony

Hi Tony,

the scroll mode will indeed add a scroll bar – but only when all other methods to maintain a table width that fits on the screen have failed. So, the browser will first start adding line breaks in the cells (e.g. showing just one word per line of text). Only after that will it add the scroll bar.

Regards,
Tobias

Very good. Then it must be working now.

Thank you, Tobias. Have a great day!

Cheers,
Tony

Hi,

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

Best wishes,
Tobias

Hi Tobias,

I just want to let you know that I finally found the root cause of the issue with described in this thread. It was a conflict with the “Hummingbird” plugin, which I have subsequently disabled to make Tablepress column-width function as desired.

I wrote above that I thought this issue was resolved, I thanked you for your help and I closed this issue off. However, I was wrong. That was me previewing a not-yet-published blog post on my phone using the WordPress app. The issue appeared to be resolved on my phone but on my laptop, the issue was still present with the left column squishing down into one-letter width in this not-yet-published table. That post has since been published and you can see the table I’m referring to here:

https://theproofreader.com.au/50-instruction-words-meanings/

Wondering if any plugins were causing a conflict, I disabled the Hummingbird plugin first and the column width of the first column immediately became normal! Issue truly resolved!

The only Custom CSS I’m using is this one:

.tablepress {
word-break: normal;
}

I wanted to tell you because, in future, when someone has an issue with column width, you might want to ask them if they are using the Hummingbird plugin.

Again, thank you for all your help! ??

Cheers and all the best,
Tony

Hi Tony,

thanks for investigating this further! Good to hear that you found the actual cause now!

Best wishes,
Tobias