表中每行的Border Radius [英] Border Radius for each row in a table
本文介绍了表中每行的Border Radius的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有这样的表格,我想对每一行使用圆角应用样式。
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屋!
查看全文