表格中每行的边界半径

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

你可以像这样写:

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/