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:10px 0 0 10px;
    -webkit-border-radius:10px 0 0 10px;
}
td:last-child{
    -moz-border-radius:0 10px 10px 0;
    -webkit-border-radius:0 10px 10px 0;
}
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:

Baca Juga

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-child td:first-child { border-top-left-radius: 10px; }
tr:last-child td: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 Code Review

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"