Border Radius For Each Row In A Table

Question

I am having the table like this and I want to apply style to each row with rounded corner.

Solution 1:

you can write like this:

td:first-child{
    -moz-border-radius:10px0010px;
    -webkit-border-radius:10px0010px;
}
td:last-child{
    -moz-border-radius:010px10px0;
    -webkit-border-radius:010px10px0;
}
td{background:red;}

Check this http://jsfiddle.net/RNWwu/1/

Solution 2:

tr {
    border-radius:5px;
    border:2px solid red;
}

Change one letter, d, to r (td to tr).

Edit: Sorry, you can't apply border to tr. Try this 'hack' instead, borrowed from here:

table { border-collapse: separate; }
td { border: solid 1px#000; }
tr:first-child td:first-child { border-top-left-radius: 10px; }
tr:first-child td:last-child { border-top-left-radius: 10px; }
tr:last-childtd:first-child { border-top-left-radius: 10px; }
tr:last-childtd:last-child { border-top-left-radius: 10px; }

Solution 3:

you can try something like this...however, you should just use <div> instead of <table>

<style>table
{
border-collapse:separate;
border-spacing:1px;
}

td
{
background-color:red;
}

td:first-child
{
border-top-left-radius:5px;
border-bottom-left-radius:5px;
border:2px solid red;
}

td:last-child
{
border-top-right-radius:5px;
border-bottom-right-radius:5px;
border:2px solid red;
}


</style><table><tr><td>Month</td><td>Savings</td></tr><tr><td>January</td><td>$100</td></tr><tr><td>February</td><td>$80</td></tr></table>

Html5 Info

Border Radius For Each Row In A Table

Solution 1:

Solution 2:

Solution 3:

Post a Comment for "Border Radius For Each Row In A Table"