四舍五入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表身

回答

相关问题