CSS3 border-radius在display: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的另一部分搞乱了它，但我不认为是这种情况。

- ZolaKt

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/

- methodofaction

---

使用div:first-child hack解决边框合并问题。https://codepen.io/chriscoyier/pen/NWKrXQx - CodeFarmer

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

- directory

---

关于 CSS 的 display 属性值 table-row，询问问题。不适用于表格元素。 - huykon225

Answer 3

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

- Guilherme de Jesus Santos

---

我不能在表格行内再嵌套表格行，必须使用表格元素。 - ZolaKt

Answer 4

我认为这种情况的最佳解决方案是创建一个包装器来覆盖表格标签，并将所有边框样式应用于它。

<div class="tableWrapper">
   <table>{tableContent}</table>
</div>

<style>
  .tableWrapper {
    border-radius:10px;
  }
</style>

- Vladyslav