CSS3 border-radius на дисплее: элемент таблицы-строки - PullRequest
13 голосов
/ 07 марта 2011

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

<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 портит это, но я не думаю, что это так.

Ответы [ 3 ]

22 голосов
/ 10 марта 2011

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

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

.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/

1 голос
/ 23 июля 2016

Вы также можете решить эту проблему, установив 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;
}
0 голосов
/ 07 марта 2011

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

...