表中的圆角

时间:2012-02-27 00:27:55

标签: html css css3

我正在尝试为我的3列表(CSS表)创建圆角。我用过:

border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;

在我的CSS中,但我得到的是顶部图像。我希望它看起来像是底部图像。

Table with rounded corners

有什么方法可以做到这一点吗?

4 个答案:

答案 0 :(得分:3)

Demo

table { border-radius:10px; }

答案 1 :(得分:3)

如果要执行每一行,请使用CSS伪类:first-child:last-child

enter image description here

演示:http://jsfiddle.net/ThinkingStiff/R792K/

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:

<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>​

答案 2 :(得分:2)

我建议将整个表格放在<div>中,然后围绕该div的角落

答案 3 :(得分:2)

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