zaokrąglenia narożników html ciała tabeli

Question

Oto fiddle

Moja próba zaokrąglić narożniki elementu tbody przegrała sprawę.

udało mi się zaokrąglić narożniki elementu tr w tbody z następujących

CSS

.tr .rounded-corners { 

    height: 225px; 
    width: 250px; 
    display: inline-block; 
    padding: 10px; 
    margin-top: 10px; 
    box-shadow: 2px 2px 7px #888888; 
    border-radius: 7px; 
    cursor: pointer; 
    cursor: hand; 
} 

Jednak, gdy próbuję zrobić podobny styl z tbody rogi są nie zaokrąglone?

.tbody .rounded { 

    background: red; 
    border-radius: 7px; 
} 

Tło wygląda na czerwone.

Answer 1

Jeśli twoja tabela jest ustawiona na border-collapse: separate (domyślnie), to promień obramowania może, ale nie musi być zastosowany do <tbody>, w zależności od przeglądarki; zachowanie jest niezdefiniowane w specyfikacjach.

Według specyfikacji — CSS Backgrounds and Borders Module Level 3 (kopalnia nacisk)

Wpływ granicznej promienia na wewnętrznych elementach tabeli jest niezdefiniowany w Tła CSS3 i krawędzie, ale może być określone w przyszłości specyfikacja. CSS3 UA powinny zignorować właściwości o promieniu obramowania zastosowane do wewnętrznych elementów tabeli, gdy "obramowanie granicy" jest "zwinięcie".

Dla spójnych wyników, w oparciu o przykład, trzeba by ustawić tbody do display: blockas suggested in this answer. Spowoduje to pewne zaburzenie zachowania tabeli, ale może być przydatne.

Answer 2

spróbować.,

.bodytable { 
    background:blue; 
    border-radius: 7px; 
    display: inline-block; 
}