CSS3 border-radius na wyświetlaczu: Element table-row

Question

To mój układ:

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

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

} 

Okrągłe granice nie pojawiają się na item elementów.
Jeśli umieści się je osobno w itemHeader i itemFlag, zostaną wyświetlone.
Ale naprawdę chciałbym, aby usunąć jakiś kod i umieścić je w item

nie może również uzyskać promień aby pracować na klasie divContainer. Chcę zaokrąglony pojemnik, który zawiera zaokrąglone rzędy.

Na czym polega problem? Być może inna część CSS zepsuła to, ale tak nie jest.

Answer 1

Obawiam się, że nie ma możliwości zastosowania promienia obramowania w wierszach tabeli. Jednak obejście tego problemu jest dość proste: wystarczy zastosować kolor tła i promień obramowania do komórek.

Jeśli usunąć kolor tła z wierszy tabeli, a można dodać to:

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

Będzie ona działać nawet w przypadku zmiany nazwy klas.

Można zobaczyć go w akcji tutaj: http://jsfiddle.net/jaSs8/1/

Answer 2

Być może problem dotyczy klasy divContainer. Spróbuj zmienić atrybut wyświetlania na wiersz tabeli.

Answer 3

Można również rozwiązać ten problem przez ustawienie float: left; na elemencie stołu. Nie wpływa to na zachowanie elastyczności stołu i działa jak urok.

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