表中每行的Border Radius [英] 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>

我写了这样的CSS。

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.

提前感谢，
Karthick

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

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

推荐答案

您可以这样写：

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/ =nofollow> http://jsfiddle.net/RNWwu/1/

Check this http://jsfiddle.net/RNWwu/1/

这篇关于表中每行的Border Radius的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！