四捨五入HTML表身

我試圖圓一個tbody元素的角是不成功的。

我可以用下面的

CSS來圓一個tr元素的角在tbody

.tr .rounded-corners { 

    height: 225px; 
    width: 250px; 
    display: inline-block; 
    padding: 10px; 
    margin-top: 10px; 
    box-shadow: 2px 2px 7px #888888; 
    border-radius: 7px; 
    cursor: pointer; 
    cursor: hand; 
}

然而，當我嘗試做一個類似的風格tbody的角落不是圓的？

.tbody .rounded { 

    background: red; 
    border-radius: 7px; 
}

背景確實顯示爲紅色。

來源

2014-12-22 TT4M.C

你可以張貼HTML嗎？ – jmore009

使用諸如jsfiddle之類的東西會非常有幫助，並且很可能會導致您的問題得到解答。 –

您不能在Tbody上放置邊框。你必須在表格元素上放置邊界半徑。這個頁面應該給你更多的信息：http://codepen.io/anon/pen/xiaCc，在另一個問題上找到它：http://stackoverflow.com/questions/19756736/is-there-a-clean-way-對獲得-邊界上-A-TBODY功能於純CSS。它設置邊界單元的邊界。（並不總是可取的，但是解決方法）。 – Mouser

如果您的表格設置爲border-collapse: separate（默認值），則根據瀏覽器的不同，邊框半徑可能會或可能不會應用於<tbody>;該規範中的行爲未定義。

根據規格— CSS Backgrounds and Borders Module Level 3（重點煤礦）：

內部表格元素邊界半徑的效果是未定義在 CSS3背景和邊界，但也可以在以後的被定義規範。 'border-collapse'爲'collapse'時，CSS3 UA應該忽略應用的內部表格元素的border-radius屬性。

獲得一致的結果，根據你的榜樣，你就必須設置tbody到display: blockas suggested in this answer。這會稍微打破錶格行爲，但可能會有用。

來源

2014-12-22 03:58:21 misterManSam

試試這個，

.bodytable { 
    background:blue; 
    border-radius: 7px; 
    display: inline-block; 
}

來源

2014-12-22 05:02:42 Sathish

四捨五入HTML表身

回答

相關問題