Hi,
thanks for your question, and sorry for the trouble.
The cause for this is that your theme is also adding such effect. To turn that off, please try adding this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:
.tablepress tr {
background-color: white !important;
}
Regards,
Tobias
You are awesome! That worked! However, I have a few more (hopefully small) issues to resolve:
1) How do I remove the lines that are showing in some of the tables? (One example is between the first row of images and the text) I’d like these tables to be completely “invisible.”
2) How do I ensure all table columns are the same width YET responsive for desktop, tablet, and mobile? I thought I had it working properly, but there is a big gap between the first column and the others in the first two tables. (It’s still working on the bottom table.)
3) Is there a way to increase the cell padding JUST for the rows with text in them? (I tried a Google search, but only saw how to increase the cell padding for the entire table.
PS Thanks for all of your help! I’m going to attempt to make a donation via the tool right now! 🙂
Hi,
for all three questions, I recommend to limit the CSS to the page with the table, which is done by the .page-id-7547 in the CSS that will follow below (7547 is the page ID that this page has in WordPress).
1) To remove these border lines, we can use this CSS:
.page-id-7547 .tablepress td {
border: none !important;
}
2) We’ll just need to set an equal width (33%) to the cells in these tables, for which we can extend the CSS from 1), and tell the images to always shrink on a smaller screen:
.page-id-7547 .tablepress td {
border: none !important;
width: 33%;
}
.page-id-7547 .tablepress img {
max-width: 100%;
}
3) For this, we can use
.page-id-7547 .tablepress .row-2 td {
padding: 4px 12px !important;
}
Regards,
Tobias
Soooooooo close, but the text is still spilling out past the images in nearly all cases on my home page. Is there some other tweak needed to keep it more tightly aligned under each image?
Hi,
that’s simply because on a desktop computer, the images have already reached their maximum size. To override that, please change
.page-id-7547 .tablepress img {
max-width: 100%;
}
to
.page-id-7547 .tablepress img {
max-width: 100%;
width: 100% !important;
}
Regards,
Tobias
Is there a way to apply the above CSS changes to all pages with tables at once? Or to add in additional page-id values? Now that the tables on the home page look exactly as I’d like, I’m starting to build out other pages, and the look and feel doesn’t currently include them. Here is an example: https://everydaywanderer.com/destinations
Hi,
for some of the CSS it wouldn’t make sense to apply it to all tables, because you’d lose flexibility to use TablePress for other types of tables (with a different structure).
So, for the images, you could remove the page ID, like
.tablepress img {
max-width: 100%;
width: 100% !important;
}
This would then apply to all images in all tables.
For the width and padding, it’s better to add the other page IDs, like
.page-id-7547 .tablepress td,
.page-id-123 .tablepress td,
.page-id-546 .tablepress td,
.page-id-789 .tablepress td {
border: none !important;
width: 33%;
}
.page-id-7547 .tablepress .row-2 td,
.page-id-123 .tablepress .row-2 td,
.page-id-456 .tablepress .row-2 td,
.page-id-789 .tablepress .row-2 td {
padding: 4px 12px !important;
}
Note how the CSS selectors are written as a comma-separated list.
Regards,
Tobias
Thank you so much! I’m all set!!!
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!
