桌子上的圓角

Question

我正在嘗試為我的3列表（CSS表）創建圓角。 我用了：

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

在我的CSS中，但是得到的是最上面的圖像。 我希望它看起來像是底部圖像。

有什么辦法可以做到這一點？

Answer 1

演示版

table { border-radius:10px; }

Answer 2

如果要進行每一行，請使用CSS偽類:first-child和:last-child 。

演示： 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>​

Answer 3

我建議將整個表包含在<div> ，然后四舍五入該div的角

Answer 4

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