Responsive Tables in Mobile Not Working

Hi,

thanks for your question, and sorry for the trouble.

When I test this, I need to first click/tap on the page and can then scroll horizontally without issues.
I’m not sure why this is necessary, but it seems to be related to some click-tracking feature that is enabled on your site, probably by some other plugin or your theme.

Regards,
Tobias

Thanks for the quick response Tobias!

On mobile on my end (iOS, Chrome), I’m noticing that the normally responsive pages have a much wider width than expected. In the past, it would respect the device’s width and once you got down to the tables, you’d be able to scroll left and right but noticing that it doesn’t behave like that right now.

Based on what you see, are you saying that you expect it to be something else interfering?

Hi,

when I check in the simulator (in the Chrome developer tools) on my computer, or on an Android phone, everything looks and works fine. Unfortunately, I don’t have an iOS device to test.

But yes, if there are issues, my assumption is that something else is interfering here.

Regards,
Tobias

Last night, I turned off the JS feature to sort columns and that seemed to have done the trick. What’s weird though is that when I test the page, I can still sort columns despite ticking off that feature “Enable sorting of the table by the visitor.”

Hi,

are you sure that you turned that off for these tables (44, 45, 46)? From what I can see in the page’s source code, sorting is still enabled for the tables.

Regards,
Tobias

I have turned it off but I’m wondering there’s some caching going on?

Hi,

TablePress only caches the HTML output of the table, but not the JS commands.

Are you maybe using a separate caching plugin for posts/pages? And what do the full Shortcodes for the tables look like that you are using?

Regards,
Tobias

For the shortcode, I just use the basic “[table id=46 /]” since I have the responsive add-on added – is that correct?

Hi,

that Shortcode is correct – but it doesn’t use any of the features that the TablePress Responsive Tables Extension adds. For that, you would have to add a parameter responsive with one of the four possible values, see https://tablepress.org/extensions/responsive-tables/

Right now, you are using the Horizontal Scrolling that comes with the DataTables JS library, which is also fine.

The sorting is now also turned off for me, so maybe I was seeing some cache output last night.

Regards,
Tobias

Hey Tobias,

If I understand, this means that I should be using [table id=46 responsive=scroll/]? In doing so, I can turn off the JS library completely as long as I don’t need sorting?

-Will

Hi Will,

yes, absolutely correct ??

Best wishes,
Tobias

LOL I’ve been using it wrong this whole time!

From a resource and page speed perspective, is it preferred to use the responsive add on vs. Javascript?

Hi,

in your case, the preferred way definitely is the TablePress Responsive Tables Extension, as you won’t be using (expensive) JavaScript code at all, but only bit of CSS code.

Regards,
Tobias

Great, thanks for confirming!

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!