CSS3 border-radius on display:table-row element

This is my layout:

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

And the 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;

}

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

Also can't get the radius开发者_开发知识库 to work on the divContainer class. I want a rounded container which contains rounded rows.

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.

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

Maybe the problem is in divContainer class. Try to change the display attribute to table-row.

You also can fix this issue by setting float:left; on the table element. It doesn't effect the behavior of the table flexibility and works like a charm.

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

I think best solution for this case is to create wrapper for table tag and apply all border styles to it.

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

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