CSS3ディスプレイ上の国境半径：テーブル行の要素

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に別々に入力すると表示されます。
しかし、私は実際にいくつかのコードをクリアし、divContainerクラス上で動作するように半径を取得することはできません。またitem

に入れたいと思います。私は丸い行を含む丸い容器が欲しいです。

何が問題ですか？たぶん、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

あなたはまた、フロートを設定することにより、この問題を修正することができます：左;テーブル要素にテーブルの柔軟性と魅力のような動作には影響しません。

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