显示的CSS3 border-radius：table-row元素 [英] CSS3 border-radius on display:table-row element

问题描述

这是我的布局：

<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

但我真的想清除一些代码，并将它们放在项

The round borders don't appear on the item elements.
If I put them separately in itemHeader and itemFlag they appear.
But I'd really like to clear some code and put them in the item

也不能得到 divContainer 类的半径。我想要一个包含圆形行的圆角容器。

Also can't get the radius to work on the divContainer class. I want a rounded container which contains rounded rows.

问题是什么？可能是CSS的另一部分正在搞乱，但我不是这样的情况。

What is the problem? Maybe another part of CSS is messing it up, but I don't thing that is the case.

推荐答案

恐怕这没有办法在表行上应用边界半径。但是，解决方法很简单：只需将背景颜色和边框半径应用于单元格。

I'm afraid this there is no way to apply border radius on table rows. However, the workaround is pretty simple: just apply the background color and the border radius to the cells.

如果从表格行中删除背景颜色，添加：

If you remove the background color from the table rows, and you can add this:

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

即使更改类名，它也会工作。

It will work even if you change your class names.

您可以在这里看到它的操作：
http：// jsfiddle.net/jaSs8/1/

You can see it in action here: http://jsfiddle.net/jaSs8/1/

这篇关于显示的CSS3 border-radius：table-row元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！