CODEWITHSUNDEEP
htmlcss
João Loureiro
João Loureiro

Reputation: 43

CSS table first-child and last-child border-radius not working

I'm trying to make a table with border-radius. Since I have different settings in the first and last row of the table (tr:first and last-child), I've created them separately in CSS file. Every setting is right like I want except for border-radius.

The code goes like this:

.tables
    {
        letter-spacing: 0.10em;
        border-collapse: collapse;
        width: 100%;
        color: #919499;
        background-color: #2f333b;
        table-layout: fixed;
        font-size: 14px;
    }

    .tables tr:first-child 
    {
        letter-spacing: 0.15em;
        border-collapse: collapse;
        font-size: 18px;
        background-color: #e97770;
        border-top-left-radius: 0.5em !important;
        border-top-right-radius: 0.5em !important;
        -webkit-border-top-right-radius: 0.5em !important;
        -webkit-border-top-left-radius: 0.5em !important;
        -moz-border-top-right-radius: 0.5em !important;
        -moz-border-top-left-radius: 0.5em !important;
        width: 100%;
        table-layout: fixed;
    }

    .tables tr:last-child
    {
        border-bottom-left-radius: 0.5em;
        border-bottom-right-radius: 0.5em;
        -webkit-border-bottom-right-radius: 0.5em !important;
        -webkit-border-bottom-left-radius: 0.5em !important;
        -moz-border-bottom-right-radius: 0.5em !important;
        -moz-border-bottom-left-radius: 0.5em !important;
    }

Any ideas how to achieve this?

Upvotes: 0

Views: 3973

Answers (1)

Glen
Glen

Reputation: 362

You can't style the TR element it needs to be on the TD. So you would need to use something like this:

.tables tr:first-child td:first-child{
   /* top left radius styles here */
}
.tables tr:first-child td:last-child{
   /* top right radius styles here */
}
.tables tr:last-child td:first-child{
   /* bottom left radius styles here */
}
.tables tr:last-child td:last-child{
   /* bottom right radius styles here */
}

Hope it helps.

Upvotes: 5

Related Questions