Hi!
Thanks for your post and sorry for the trouble!
1. Are you sure that the “Horizontal Scrolling” and the “Enable features for site visitors” checkboxes are turned on for the tables on this page? Right now, the relevant code is not being loaded, which makes me think that these checkboxes are turned off.
That said, the TablePress premium versions also contain other solutions for making tables look better on small screens. Please see https://tablepress.org/modules/responsive-tables/ for examples.
2. Yes, this should be possible: You can then even directly use a URL for the import, without having to download a file first. For step by step instructions on how to get that URL for Google Sheets, please see https://tablepress.org/tutorials/import-google-sheets/
(Manual import with this method is possible in all TablePress versions. If you would like to automate this, you could use the Automatic Periodic Table Import feature module that is part of the TablePress Max license plan.)
Best wishes,
Tobias
Thanks for the quick response @tobiasbg !
I may have been attempting to uncheck and recheck the Fir table (then clear all the caches) when you were examining that top table, but the other 3 tables remained set to only the 2 check boxes: “Enable Visitor Features” and “Horizontal Scrolling”. . . do you still not show the relevant code for those 4 tables now as well? I’ve been using Tablepress for long enough to remember (I think?) the variables within the shortcode to perform added functions. 🙂 Here’s an example:
[table id=4 responsive=flip responsive_breakpoint=phone /] — does that take you back a bit? 😀
Thanks for the how-to link for Import as well! Though, at first glance, it doesn’t seem to speak to the tabbed spreadsheet issue I’m having — those 4 tables are all on the same Sheet. Does that advice you gave still work on a 4-tabbed Sheet like that, or do I need to separate them out in order for a smoother Export / Import to Tablepress?
Thanks again.
S
Hi,
Ah, now I found the reason why the JavaScript code is not being loaded: You are using the #colspan# keyword in your tables, to merge cells within the same row. Unfortunately, this is not compatible with the “Horizontal Scrolling” feature that is part of the basic version of TablePress. (The premium versions contain a second implementation of such scrolling that is not subject to that limitation.)
Can you therefore please try again after removing all those #colspan# keywords from the tables? They should not be needed anyways, as the content in those cells is quite short anyways, compared to the other content in the first columns.
The Shortcode with the flip mode that you pasted would require either the old/outdated/retired and no longer supported “TablePress Extension: Responsive Tables”, or an upgrade one of the premium versions.
For the spreadsheet tabs: Isn’t Step 4 what you are looking for? Maybe this is just an issue with the confusing terminology: What you call “tab” is what Google and Excel call “worksheet”, whereas what you call “sheet” is a “workbook” for them.
Best wishes,
Tobias
- Thanks! That makes sense… Although now (to the naked eye) I am not seeing that there is a hidden column to the right on my mobile browser – it seems just “wide” enough to cleanly separate between the 2 last columns. 🙂 I’ll have to see what the client thinks – we may have to go with the static width for this, and “bump” the right side boundary back out a bit for its full view (like it was before I allowed the horizontal scrolling). Thanks again.
- Aha… apologies for being lazy and not thoroughly reading #4 through fully. 😮 I see now how the individual “work sheet” GID and Import that specific URL (vs. the file upload after a download!). That sounds much better than separating out the 4 worksheets for import as Excel spreadsheets individually! 😀 Thanks for your patience on that, as well as the how-to link. . . very helpful.
Thanks again, @tobiasbg — have a good weekend!
Steve C.
3Cstudio
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 in the plugin directory. Thanks!
Oh yes – rated long ago. 😀 And Favorite-d around that same time!
S
Hi,
thanks, I really appreciate it 🙂
Best wishes,
Tobias
Oh, 1 follow-up question: Is column width an option? It seems some of the “squished” columns could be more visible and stretched horizontally for better legibility, but I don’t see a way to work that out in the standard features. I know I can do something via CSS, but wondered if there were settings (or how-to) in place to tackle such things… That also might help with the width of these tables that are just a little bit wider than a mobile browser in portrait mode. For instance, the columns Age and Size would be much easier to decipher if their content was full-width – make sense or no?
Thanks in advance for your thoughts!
S
Hi,
For setting column widths, I recommend the approach from https://tablepress.org/faq/column-widths/. To make columns wider than they are, you would also need to add
min-width: 200px;
to the CSS, in addition to width: 200px;(and with the desired pixel value for both).
You could also disallow automatic line wrapping, which might make sense for the age column, with
white-space: nowrap;
Regards,
Tobias
Very nice. I tested:
.tablepress-id-4 column-1 {
width: 150px !important;
}
…but it didn’t show (even with !important added secondarily), because that line in the Inspector shows a custom inline width already:
<th class="column-1 sorting_disabled" rowspan="1" colspan="1" style="width: 336.633px;">FIR</th>
How’d I accomplish that custom width? 😀 By dragging within the Edit area? If so, how do I ‘revert’ to the default for columns? I just tried double-clicking, even though visually they all appear to be equi-distant columns in the Edit area.
S
Hi,
using the !important flag is the correct way here — however, you will likely not be be able to reduce the column width if the table is overflowing and requiring horizontal scrolling anyways. It would already be at its minimum width then. To increase the width, you would need min-width, as mentioned above, with a higher value.
The column width on the “Edit” screen has no influence. That really only affects the “Edit” screen, but not the frontend.
Regards,
Tobias
Ah, got it. Looking much better now!
I also attempted to use some variables present on an “old” table at: https://hollandbuscompany.com/school-bus-inventory-used/ — I have the following added in order to make it a vertical table list instead of horizontal listing of items (in mobile only) so that the top table headers were now left side table headers and the viewer scrolled right:
[table id=4 responsive=flip responsive_breakpoint=phone /]
Is that still valid or has it been deprecated in any way? I can’t get it to work with the current setup, even in that table with the same ID (Fir)… can you spot why that is? I removed Enable Visitor Features from it in case that was affecting things, but no change. Thoughts?
S
Hi,
The Shortcode with the flip mode that you posted would require either the old/outdated/retired and no longer supported “TablePress Extension: Responsive Tables”, or an upgrade one of the premium versions.
Regards,
Tobias
Ah, yes — I see that now in Plugins — thanks once again for all the feedback & direction, @tobiasbg!
S
Hi,
yes, that’s the one 🙂 Keep in mind that this plugin is no longer being updated or supported though. The premium versions come with quite some improvements regarding the responsiveness.
Best wishes,
Tobias
