График border-radius CSS3: элемент table-row

Это мой макет:

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

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

}

Круглые границы не отображаются в элементах item.
Если я поместил их отдельно в itemHeader и itemFlag, они появятся.
Но мне бы очень хотелось очистить код и поместить его в item

Также не может получить радиус работы в классе divContainer. Я хочу округленный контейнер, который содержит округленные строки.

В чем проблема? Может быть, еще одна часть CSS испортила его, но я ничего не делаю.

Ответ 1

Я боюсь, что нет способа применить радиус границы для строк таблицы. Однако обходной путь довольно прост: просто примените цвет фона и радиус границы к ячейкам.

Если вы удалите цвет фона из строк таблицы, и вы можете добавить это:

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

Он будет работать, даже если вы измените имена классов.

Вы можете увидеть это в действии здесь: http://jsfiddle.net/jaSs8/1/

Ответ 2

Вы также можете исправить эту проблему, установив float: left; на элемент таблицы. Это не влияет на поведение гибкости таблицы и работает как шарм.

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

Ответ 3

Возможно, проблема в классе divContainer. Попробуйте изменить атрибут отображения на таблицу-строку.