有沒有一種乾淨的方法可以在純CSS中獲得<tbody />的邊框？

Question

我想設置一個背景和一個<tbody/>圓角的邊框，比如

tbody { border-radius: 15px; border: 1px solid black; background: #ccf; } 

然而，當我嘗試這Codepen，邊框和背景色的顯示屏，但<tbody/>仍具有方角。

我能夠解決此問題，使用一系列的:last-child和:first-child選擇應用半徑個別td S於角落，例如

tbody tr:first-child td:first-child { border-top-left-radius: 15px; } 

This version does what I want（至少，火狐下），但也感覺非常冗長和黑客，當我添加兼容性的前綴版本（-moz-,-webkit-等），並且除<td/>之外還支持<th/>元素時，問題只會變得更糟。有沒有一種簡潔的，純CSS的方式來獲得這種行爲？

Answer 1

假設您摺疊了表格中的邊框，只需在tbody上設置display:block並應用border-radius即可。

Codepen example

CSS

table { 
    width: 100%; 
    border-collapse: collapse; 
    display: block; 
    width: 600px; 
} 

tbody { 
    background: #ccf; 
    border: 1px solid black; 
    border-radius: 15px; 
    display: block; 
} 

th, td { 
    width: 200px; 
} 

td, th { 
    padding: 5px; 
    text-align: center; 
}