Радиус рамки для каждой строки в таблице

Question

У меня есть таблица как это, и я хочу применить стиль к каждой строке с закругленным углом.

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

И я написал CSS как это.

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

У меня есть несколько столбцов, и я хочу показать строки в закругленном углу. Когда я пытаюсь сделать это для одной ячейки, я могу ее достичь. Кто-нибудь мне помогает.

Спасибо заранее, Karthick

На самом деле я хочу, выход, как это, но есть разница между каждой ячейки в строке. Я пробовал использовать интервал между ячейками, но я не могу получить.

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

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

Мои ряды, как показано на рисунке, имеют сплошные границы.

Answer 1

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

Изменить одну букву, d к r (td к tr).

Редактировать: К сожалению, вы не можете применить границу к tr. Попробуйте это «взломать» вместо этого, заимствованные из 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; } 

Answer 2

вы можете попробовать что-то вроде этого ... однако, вы должны просто использовать <div> вместо <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> 

Answer 3

вы можете написать так:

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

Проверить это http://jsfiddle.net/RNWwu/1/