Hi,
thanks for your post, and sorry for the trouble.
If you are not using a header and footer, this could should work:
.tablepress-id-2 tbody tr:first-child td:first-child {
border-top-left-radius: 10px;
}
.tablepress-id-2 tbody tr:first-child th:last-child {
border-top-right-radius: 10px;
}
.tablepress-id-2 tbody tr:last-child td:first-child {
border-bottom-left-radius: 10px;
}
.tablepress-id-2 tbody tr:last-child td:last-child {
border-bottom-right-radius: 10px;
}
Regards,
Tobias
Hi Tobias,
I used a new table to test the above code and I added the below code to add borders (took the below code from one of your post replies)
.tablepress-id-2 th,
.tablepress-id-2 td {
border: 1px solid #dddddd;
}
and get the following output on my page. http://toppayingptcsites.net/
is there something wrong that I might be doing.
Hi,
please try again with this:
.tablepress-id-10 {
border-collapse: separate;
}
.tablepress-id-10 td {
border: 1px solid #dddddd !important;
}
.tablepress-id-10 tbody tr:first-child td:first-child {
border-top-left-radius: 10px;
}
.tablepress-id-10 tbody tr:first-child th:last-child {
border-top-right-radius: 10px;
}
.tablepress-id-10 tbody tr:last-child td:first-child {
border-bottom-left-radius: 10px;
}
.tablepress-id-10 tbody tr:last-child td:last-child {
border-bottom-right-radius: 10px;
}
Regards,
Tobias
Awesome, the above code worked. All four sides are round corner now. I liked TablePress very much, working just as expected.
I just changed the th:last-child to td:last-child, coz i’m not using the header.
Thank you so much for your help.
Hi,
no problem, you are very welcome! 🙂 Good to hear that this helped!
Yes, the th was a typo. td is correct. Nice find!
Best wishes,
Tobias
P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!
Tobias, Thanks for all your help on your website and this forum. I am trying to figure out how to get rounded corners and it is not working. Any suggestions – http://roadguardians.org/test-6-18/
Hi Megan,
it as actually, there’s just an extra border that needs to be removed. Please also add this to the “Custom CSS”:
.entry .tablepress {
border: none;
}
Regards,
Tobias
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!
Hi Tobias,
Is it possible to have round corners for individual cells in a table.
Hi,
thanks for your question, and sorry for the trouble.
You probably mean something like this
.tablepress-id-123 {
border-collapse: separate;
border-spacing: 5px;
}
.tablepress-id-123 td {
border: 1px solid #dddddd;
border-radius: 10px;
}
(with the table ID adjusted).
Regards,
Tobias
Thanks Tobias, I am getting the round corners for all the cells in the table, but the first row top border does not appear, do I have write a separate code for the top border.
Something like:
.tablepress-id-123 .row-1 .column-1,
.tablepress-id-123 .row-1 .column-2 {
border-top: 1px solid #583759 !important;
}
Hi,
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
Here is the table where the top border in the first row does not appear.
http://toppayingptcsites.net/
Hi,
thanks for the link!
It should be enough to extend the line
border: 1px solid #dddddd;
from the code that I pasted above to
border: 1px solid #dddddd !important;
Regards,
Tobias
