CODEWITHSUNDEEP
htmlcss
flykarthick
flykarthick

Reputation: 79

Border Radius for each row in a table

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

<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>

And I have written the CSS like this.

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

I am having multiple columns and I want to show the rows in a rounded corner. When I am trying this for a single cell, I can able to achieve. Anyone help me.

Thanks in advance, Karthick

Actually I want the output like this but there is a gap between each cell in a row. I tried using cell spacing but I cant get.

td { border: solid 1px #000; }
tr td:first-child
{ 
  border-top-left-radius: 10px; 
  border-bottom-left-radius: 10px;
  border-right:none;
}
tr td:last-child 
{ 
border-top-right-radius: 10px; 
border-bottom-right-radius: 10px;
border-left:none;
}

/````````````````````\
\..................../
/````````````````````\
\..................../
/````````````````````\
\..................../

My rows want to display like this with solid borders.

Upvotes: 1

Views: 19284

Answers (3)

sandeep
sandeep

Reputation: 92803

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/

Upvotes: 6

Timmerz
Timmerz

Reputation: 6199

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>

Upvotes: 0

Elliot Bonneville
Elliot Bonneville

Reputation: 53291

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

Upvotes: 2

Related Questions