CSS border-radius for last-child

Question

I have this code:

tr:first-child th:last-child    {
    -webkit-border-top-left-radius: 15px;
    -moz-border-radius-topleft: 15px;
    border-top-left-radius: 15px;
}
tr:first-child th:first-child   {
    -webkit-border-top-right-radius: 15px;
    -moz-border-radius-topright: 15px;
    border-top-right-radius: 15px;
}
tr:last-child th:last-child {
    -webkit-border-bottom-left-radius: 15px;
    -moz-border-radius-bottomleft: 15px;
    border-bottom-left-radius: 15px;
}
tr:last-child th:first-child    {
    -webkit-border-bottom-right-radius: 15px;
    -moz-border-radius-bottomright: 15px;
    border-bottom-right-radius: 15px;
}

I did the same for <td> tags as well.

It's supposed to make the table rounded.

Now I have a problem.

I have one table in my website who has hidden <td> at the last row, and the user need to click the <th> line to show thet <td>.

The CSS is assuming I have <td> in the last-child of the <tr> so it's get rounded. BUT the problem is that it's hidden.

The <th> is in the <tr> last-child that the user actually sees, but it isn't get rounded because of that last <td> which is hidden and it looks bad.

Any suggestions?

Answer 1

Use nth-last-child. It selects every element of rx+n from the end. (:nth-last-child(r+n) or just :nth-last-child(n) (assumes r of 0))

tr:nth-last-child(2) th:last-child {}

Answer 2

You can use :last-of-type pseudo class on td. something like td:last-of-type should work.