我有这样的表格,我想将样式应用到带有圆角的每一行。
<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;
}
我有多个列,我想在圆角中显示行。当我尝试对单个细胞进行此操作时,我能够实现。任何人都可以帮助我。
提前致谢,
卡西克
实际上我想要这样的输出,但是一行中的每个单元格之间有一个间隙。我尝试使用单元格间距,但我无法得到。
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/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)