Czy istnieje czysty sposób na uzyskanie granic na <tbody /> w czystym CSS?

Question

Chciałbym ustawić tło i obramowanie zaokrąglony na <tbody/>, takich jak

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

Jednak, gdy próbuję to w Codepen, z kolorowym wyświetlaczem obramowania i tła, ale <tbody/> nadal ma kwadratowe narożniki .

jestem w stanie obejść ten problem stosując szereg :last-child i :first-child selektorów zastosować promień do indywidualnych td s na rogach, jak na przykład

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

This version does what I want (przynajmniej pod firefox), ale jest także wyjątkowo gadatliwy i hacky - problem, który pogorszy się dopiero po dodaniu prefiksowanych wersji pod kątem zgodności (-moz-, -webkit- itp.) oraz obsługi elementów <th/> oprócz <td/>. Czy istnieje zwięzły, czysty sposób na uzyskanie tego zachowania?

Answer 1

Zakładając, że zwinąłeś brzegi w tabeli, po prostu ustaw display:block na tbody i zastosuj 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; 
}