Table not rendering properly on phone

Hi Keith,

thanks for your question, and sorry for the trouble.

I can’t really reproduce any issues here. One small screens (which I tested by reducing the browser window and in the phone emulator in the Google Chrome developer tools), the images shrink until they are no longer visible.

Now, you are probably running into a general issue with tables on small screens. There’s just no fixed behavior that will make tables look nice on small screens, due to how HTML tables work in web browsers.
In your example, it would probably be the best to switch to a one-column layout for the table on small screens — but unfortunately that’s not possible with HTML tables, due to their fixes tabular structure ??

Regards,
Tobias

Hi Tobias

Thanks very much for your swift reply and full explanation.

This is the effect some people are getting: https://twitter.com/Abebab/status/519883214023045120. But from what you say, it seems there’s no easy fix for this with HTML tables.

I wonder if this would be a feasible solution: (1) create a simpler table without the icons (2) set wordpress to substitute the simpler table when the browser screen resolution falls below a certain figure. Do you think that would work, and, if so, can give me any tips on how to create the conditional command needed for (2)?

Thanks again, both for the plugin and for the excellent support you offer!

Keith

Hi Keith,

ha, that’s indeed a really strange behavior. I have never really seen that before… I have no clue why the images suddenly appear on top of the text…

Yes, two versions of the table (one with two columns and the images, and one with just one column and without images) could be nice way to go here.
You would embed both into the page with their Shortcodes and you could then add some “Custom CSS” like this:

.tablepress-id-1 {
  display: table;
}
.tablepress-id-2 {
  display: none;
}
@media (max-width: 768px) {
  .tablepress-id-1 {
    display: none;
  }
  .tablepress-id-2 {
    display: table;
  }
}

In that, table 1 would be the big one, and table 2 would be the small one. The 768px would be the screen width at which the switch happens.

Regards,
Tobias

Thank you Tobias! That works perfectly.

One final question, please, if I may: Will this custom css be retained if I do an automatic update of TablePress?

Best wishes, Keith

Hi Keith,

great to hear that this will help! ??

And yes, the “Custom CSS” is saved in the database (and in the wp-content folder) and will be kept during a plugin update. No need to worry.

Best wishes,
Tobias

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

Thanks! I certainly will rate the plugin (and highly!)

One final, final question, if I may, please: Can custom css be used to display or hide particular columns? From your original answer I suspect it can’t, but if it could it would offer an even neater solution to my problem. I could put the icons in a separate column and set the column to hide if the browser window was smaller than 768px.

Best wishes,
Keith

Hi Keith,

yes, that would also be possible, with something like

@media (max-width: 768px) {
  .tablepress-id-123 .column-1,
  .tablepress-id-123 .column-3 {
    display: none;
  }
}

This would hide columns 1 and 3 of table 123.

However, the other two columns would still stand next to each other, whereas the other approach would allow to switch to a one-column table. But now that you have both possibilities at hand, you can decide, which one you like better ??

Regards,
Tobias

Brilliant! That’s a neat option.

Thanks again. I’ll rate the plugin now.

Best, Keith

Hi Keith,

thanks, I really appreciate it!

Best wishes,
Tobias