html - 表中每一行的边框半径

Question

我有这样的表格，我想将样式应用于圆 Angular 的每一行。

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

我有多个列，我想在圆 Angular 中显示行。当我为单个单元格尝试此操作时，我可以实现。任何人都可以帮助我。

提前致谢， 卡西克

其实我想要这样的输出，但是一行中的每个单元格之间都有一个间隙。我尝试使用单元格间距，但无法获得。

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/