arrotondare gli angoli del corpo della tabella html

Question

Ecco un fiddle

Il mio tentativo di arrotondare gli angoli di un elemento tbody ha avuto successo.

sono stato in grado di arrotondare gli angoli di un elemento tr nel tbody con il seguente

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

Tuttavia, quando provo a fare uno stile simile con tbody gli angoli sono non arrotondato?

.tbody .rounded { 

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

Lo sfondo appare in rosso.

Answer 1

Se la tabella è impostata su border-collapse: separate (impostazione predefinita), il raggio di confine può o non può essere applicato a <tbody>, a seconda del browser; il comportamento non è definito nelle specifiche.

Secondo le specifiche — CSS Backgrounds and Borders Module Level 3 (sottolineatura mia):

L'effetto di border-radius su elementi di tabella interne è indefinito in sfondi CSS3 e bordi, ma può essere definita in un futuro specifica. I CSS3 UA dovrebbero ignorare le proprietà border-radius applicate agli elementi di tabella interni quando 'border-collapse' è 'collapse'.

Per risultati coerenti, sulla base di esempio, si dovrà impostare il tbody-display: blockas suggested in this answer. Ciò interromperà un po 'il comportamento della tabella, ma potrebbe essere utile.

Answer 2

provare questo.,

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