表中的圓角

我想爲我的3列表（CSS表）創建圓角。我用：表中的圓角

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

在我的CSS，但我得到的是頂部圖像。我想讓它看起來像是底部的圖像。

Table with rounded corners

有沒有什麼方式可以做到這一點？

來源

2012-02-27 ahsu

你能後的CSS和HTML？ – fncomp 2012-02-27 00:34:00

謝謝你們！第n個孩子的技巧有幫助，並且這是有效的：第n個孩子（1）{0} {0} {0} {0} {0} {0} -webkit-border-radius：10px 0 0 10px; border-radius：10px 0 0 10px; } n-child（3）{ -moz-border-radius：0 10px 10px 0; -webkit-border-radius：0 10px 10px 0; border-radius：0 10px 10px 0; } – ahsu 2012-02-27 07:22:04

對於代碼縮進感到抱歉。 – ahsu 2012-02-27 07:23:48

我建議圍繞整個表的<div>，然後舍入div的角落

來源

2012-02-27 00:30:47 msonsona

Demo

table { border-radius:10px; }

來源

2012-02-27 00:35:36 bookcasey

如果你想要做的每一行，使用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>

來源

2012-02-27 00:37:05 ThinkingStiff

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

來源

2012-02-27 00:41:17

回答

相關問題