CSS3 border-radius in mostra: elemento table-row

Question

Questo è il mio layout:

<div class="divContainer"> 
     <div class="item"> 
      <div class="itemHeader"></div> 
      <div class="itemBody"><div> 
      <div class="itemFlag"></div> 
     </div> 
     .... 
</div> 

E il CSS:

.divContainer{ 
    display:table; 
    border-spacing:0 5px; //bottom spacing 
    width:100%; 
} 

.item{ 
    display:table-row; 
    height:45px; 
    -moz-border-radius:10px; 
    -webkit-border-radius:10px; 
    border-radius:10px; 
} 

.itemHeader, .itemBody, .itemFlag{ 
    display:table-cell; 
} 

.itemHeader{ 
    width:100px; 
} 

.itemBody{ 
    width:150px; 
} 

.itemFlag{ 
    width:20px; 

} 

I bordi rotondi non appaiono sulle item elementi.
Se li metto separatamente in itemHeader e itemFlag appaiono.
Ma mi piacerebbe davvero cancellare un codice e metterli in item

Inoltre non è possibile ottenere la distanza per lavorare sulla classe divContainer. Voglio un contenitore arrotondato che contenga file arrotondate.

Qual è il problema? Forse un'altra parte del CSS lo sta rovinando, ma non è così.

Answer 1

Ho paura che non ci sia modo di applicare il raggio del bordo sulle righe del tavolo. Tuttavia, la soluzione alternativa è piuttosto semplice: basta applicare il colore di sfondo e il raggio del bordo alle celle.

Se si rimuove il colore di sfondo delle righe della tabella, e si può aggiungere questo:

.item > div { 
    background-color: #ccc; 
} 

.item > div:first-child { 
    border-radius: 10px 0 0 10px; 
    -moz-border-radius: 10px 0 0 10px; 
} 

.item > div:last-child { 
    border-radius: 0 10px 10px 0; 
    -moz-border-radius: 0 10px 10px 0; 
} 

Funzionerà anche se si cambia i vostri nomi di classe.

Potete vederlo in azione qui: http://jsfiddle.net/jaSs8/1/

Answer 2

Forse il problema è nella classe divContainer. Prova a cambiare l'attributo di visualizzazione nella riga della tabella.

Answer 3

È inoltre possibile risolvere questo problema impostando float: left; sull'elemento del tavolo. Non influisce sul comportamento della flessibilità del tavolo e funziona come un fascino.

table { 
float: left; 
display: table; 
width: 100%; 
border-collapse: collapse; 
} 
tr { 
display: table-row; 
width: 100%; 
padding: 0; 
} 
td { 
font-weight: bold; 
background: #fff; 
display: table-cell; 
border-radius: 10px; 
}