显示上的 CSS3 边框半径：table-row 元素

Question

这是我的布局：

<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 的另一部分搞砸了，但我不这么认为。

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

Answer 2

也许问题出在 divContainer 类中。尝试将显示属性更改为table-row。

Answer 3

你也可以通过设置 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;
}