如何在桌子周圍產生彎曲的邊框？

Question

在桌子周圍創建彎曲邊框的最佳方法是什麼？

使用border-radius屬性只是在表的外部放置一個彎曲的邊框。但是，單個單元格會生成雙邊界。

<table class="round" with="100%" height="200"> 
<tr> 
    <td>Text</td> 
</tr> 
</table> 

它的CSS定義爲

.round{ 
    border: 1px solid black; 
    border-radius: 20px; 
} 

這隻會產生與周圍的細胞無邊框圓角表格。如果我們試圖通過把

.round td{ 
    border: 1px solid black; 
} 

產生細胞周圍的邊框然後，我們得到一個雙邊框。

是否有解決方法？

Answer 1

改爲在角單元上放置邊界半徑。

.tr:first-child .td:first-child{ 
    border-top-left-radius: 20px; 
} 
.tr:first-child .td:first-child{ 
    border-top-right-radius: 20px; 
} 

.tr:last-child .td:first-child{ 
    border-bottom-left-radius: 20px; 
} 
.tr:last-child .td:first-child{ 
    border-bottom-right-radius: 20px; 
} 

根據內容的不同，您可能需要填充這些單元格。 您還需要供應商前綴，並可能爲IE應用JavaScript樣式。或者使用派。