Round Corners Tables without header and footer

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. https://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 – https://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

Thanks!

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.
https://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