Columns messed up on mobile

Hi,

thanks for your post, and sorry for the trouble that you are experiencing.

Unfortuantely, tables on mobile devices are in general tricky. The reason is basically, that they behave different than most other elements on a website, especially in regard to things like column widths.

Now, one option might be to use the Responsive Tables Extension that “flips” the table to the side: https://tablepress.org/extensions/responsive-tables/
If that’s not what you want, I suggest that you post the link to the page with the table (or send to me in an email (which you can find in the main plugin file “tablepress.php”), if it’s private), and I’ll take a look and see if I can come up with other ideas.

Regards,
Tobias

I’m fairly new to this whole world of WordPress but I THINK I FIGURED OUT A SOLUTION!! (Those capitals are me being super excited!)

Here is a page on my site:
nicenormalfamily.com/zz-test/
Password: SUNDAYTEST

If you look at the page on a computer, it looks awesome. The problem is when you look at it from an iPhone/Mobile device.

It seems the table does not like COMMAS or HYPHENS/DASHES or SPACES.

I’ve changed the entire first row (info for Grandma Smith) to show no commas or dashes, and everything looks PERFECT on a mobile device. Changing the birthdates and anniversaries from hyphens to slashes, and changing dashes within a telephone number from dashes to dots looks normal. However, I had to eliminate the spaces within the address, which does look a bit odd. Also a bit odd is the way I had to list Smith/Grandma rather than Smith, Grandma.

Any way to fix that?

BTW, your response time was nothing short of AMAZING. Thank you, thank you, thank you.

EDIT/ One other question: The email addresses are not “clickable” for some reason on a phone/mobile device. But my solution does not hamper the click-ability of the phone numbers – they’re still easily dialed by tapping the number.

Thanks again!

Hi,

thanks for the link! Good to hear that you have found a first solution! ??

The reason why this works, is basically, that browsers will treat spaces, hyphens, commas, and probably some other characters, as places where they can add a line break, i.e. wrap the text into two lines, if the horizontal space is not enough.
When you changed that to periods or slashes, you basically took that possibility away from the browser, so that everything is shown in one line.
Fortunately, there’s a way of forcing this behavior. Please try adding this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

.tablepress-id-4 tbody td {
  white-space: nowrap;
}

This should make the browser write all cell content in one line, regardless of spaces, hyphens, or commas. Thus, you should actually be able to revert those changes or removing spaces and inserting slashes.

About the second question: Yes, email addresses are not made clickable by default. And actually, neither are phone numbers, at least not by TablePress. This is probably done automatically by your phone. The good thing is that you can make emails clickable with a small TablePress Extension. Please see https://tablepress.org/extensions/automatic-url-conversion/ for more. You’ll just need to install that and add a parameter to the Shortcode.

Regards,
Tobias

WONDERFUL! Worked like a dream! Thank you so, so much! You have been completely AWESOME in helping me, and I really, really appreciate it.

I have another question but I’ll start another thread so that others can find it if they search for the same question.

Thanks again.

Is there a code to cover ALL tables or must they be listed separately?

THANKS AGAIN!

Hi,

great to hear that this worked! ??

Yes, this can be done in all tables with a single command. Just remove the “-id-4” part of the CSS selector to get

.tablepress tbody td {
  white-space: nowrap;
}

Regards,
Tobias

Great! Thank you so very much!

Hi,

sure, no problem! You are very welcome!

Best wishes,
Tobias

P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!