Hi,
thanks for your post, and sorry for the trouble.
I don’t understand. If you get rid of the collapse button, and make the second column always visible, there’s nothing actually collapsing anymore?! It would just be the full table again?
Regards,
Tobias
Hello, thanks for the response and sorry for the confusion. Yes, in mobile view I would like to get rid of the collapse button so column B is always visible underneath column A. So for my small tables column 1 is the header, column 2A will be an Image and 2B will be a short description under the image but always visible. Next is column 3A with 3B underneath and so on. Thank You for any help.
Hi,
ah, thanks for the explanation. For this you would need a different approach, based on CSS code. So, instead of using the collapse mode, please add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:
@media screen and (max-width: 768px) {
.tablepress-id-123 thead th,
.tablepress-id-123 tbody td {
display: block;
}
}
The table ID needs to be adjusted to your table’s ID here.
Regards,
Tobias
I’m not sure if I’m doing something wrong but I didn’t work. I added the above CSS code to the plugin options page as you said. I already have over 500 tables and I wasn’t sure if needed to change the table id # for each one. To start I saved the above code exactly like you said and checked the page that had table 123 in it. I tried these in the page all with no luck.
[table id=123 /]
[table id=123 responsive=scroll /]
[table id=123 responsive=collapse /]
Sorry If I’m missing something easy….. Stephanie
Hi Stephanie,
for the CSS code from my previous code, the Shortcode
[table id=123 /]
would be correct (all with the correct and matching table ID).
If it still doesn’t work, can you please post a link to the page with the table where this problem happens, so that I can take a direct look? Thanks!
Regards,
Tobias
Hello, Tobias Thank You for your response. This is the CSS code I put on line #1 of the plugin options custom CSS
@media screen and (max-width: 768px) {
.tablepress-id-123 thead th,
.tablepress-id-123 tbody td {
display: block;
}
}
Here is the link of the page that has Table ID 123.
http://stadiumstay.com/listing/washington-redskins-hotels-fedexfield/
On that page, I put 2 table shortcodes so that you can see them both. This is the first
[table id=123 /]
and this is the second [table id=123 responsive=collapse /]
No matter what I do or try I can’t get that first table to have column B always visible under column A. Also I have about 500 tables. Is there a CSS code I can use that will work with all of them at once or do I have to put one code in custom CSS for each table ID? Thank You Again….. Stephanie
Hi,
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?
After that, the table layout should change on small screens, as expected.
If you really want to apply this code to ALL tables on the site, you could use the code
@media screen and (max-width: 768px) {
.tablepress thead th,
.tablepress tbody td {
display: block;
}
}
Note how this doesn’t have a table ID in it, so that it applies to all tables.
Regards,
Tobias
Ok Thank You for all your help. I will try it as soon as I can figure out why I can’t connect to the server in FileZilla. If anyone can help me figure out this error code they would be my hero.
fzSftp started, protocol_version=8
Connection timed out after 20 seconds of inactivity
Error: Could not connect to server
I will let you know if it works after I figure this out. I’ll have to do some research tomorrow to figure this out. Thanks again, you’ve gone above and beyond
Hi,
sorry, I have idea about these FTP issues, that’s just not my area of expertise.
Regards,
Tobias
That Worked PERFECTLY! Thank You SO Much!!!
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!
