[英]Rounded corners in a table
I am trying to create rounded corners for my 3 column table (CSS table). 我正在尝试为我的3列表(CSS表)创建圆角。 I used: 我用了:
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
in my CSS, but what I get is the top image. 在我的CSS中,但是得到的是最上面的图像。 What I want it to look like is the bottom image. 我希望它看起来像是底部图像。
Is there any way that this can be done? 有什么办法可以做到这一点?
table { border-radius:10px; }
If you want to do each row, use the CSS pseudo-classes :first-child
and :last-child
. 如果要进行每一行,请使用CSS伪类:first-child
和:last-child
。
Demo: http://jsfiddle.net/ThinkingStiff/R792K/ 演示: http : //jsfiddle.net/ThinkingStiff/R792K/
CSS: CSS:
table { border-spacing: 0; }
td {
border-top: 1px solid black;
border-left: 1px solid black;
border-bottom: 1px solid black;
padding: 10px;
}
td:first-child {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
td:last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-right: 1px solid black;
}
HTML: HTML:
<table>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>
我建议将整个表包含在<div>
,然后四舍五入该div的角
TD:first-child {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
TD:last-child {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.