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它們出現。
但我真的想清除一些代碼，並把它們放在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類中。嘗試將顯示屬性更改爲表格行。

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