Hi,
thanks for your post, and sorry for the trouble.
I’m not exactly sure what you mean here. Do you mean “rows” after the table has been flipped (i.e. the columns before the table has been flipped)? Or to you mean rows that then appear as columns?
Can you maybe post a link to the page with the table where this problem happens?
Regards,
Tobias
Hi,
I mean the rows after the table has been flipped.
I have implemented it here so you can see what I mean:
http://www.simpel.be/autoverzekering/
Scroll to the right and you will see what I mean.
Thank you
Hi,
thanks for the link, now I see what you mean.
This is actually not how the table is supposed to look like, and this issue is the result of a missing piece of CSS code in your theme. To fix that, please try adding this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:
#content .post {
width: 100%;
}
This will resolve the scrolling issue, but the table will still not look that nice.
For that, please also try adding this “Custom CSS”:
@media (max-width: 767px) {
.tablepress-id-1 th,
.tablepress-id-1 td {
height: 50px;
padding: 6px;
border-radius: 0 !important;
}
}
Regards,
Tobias
Thanks, I have just implemented it, looks a lot better.
Any other ideas on styling the Table are always welcome 🙂
How can I apply this css to all the tables without having to repeat the code one by one for all tables in the CSS?
Thank you
Hi,
if you want to apply this to all tables, you’ll just have to change the two .tablepress-id-1 to .tablepress.
I don’t really recommend that however, unless all of your tables have the same structure, regarding cell height and images, etc.
Regards,
Tobias
Thanks Tobias,
All of the tables use the same size of images and layout but some might have more or less columns or more or less information in it.
Can you perhaps elaborate on what the functions in the Custom css do so that I can apply them to other tables in the best way possible?
Once again thanks for the great support offered.
Hi,
then the idea of simply using .tablepress as the CSS selector should work.
If there’s a table where you don’t want this, or where you want this in a different way, you could simply add the code again for the more specific selector and override the behavior.
The CSS code basically checks if the table is on a small screen (the first line), and then applies some changes to all cells in the table head (the second line) and all cells in the table body (the third line).
Those changes are: An equal cell height (the fourth line), an equal padding for header and body cells (the fifth line), and no round corners (the sixth line), as that looks broken.
Best wishes,
Tobias
Hi,
no problem, you are very welcome! 🙂
Best wishes,
Tobias
