这是一个fiddle
我尝试圆化 tbody
元素的 Angular 没有成功。
我能够使用以下代码将 tbody
中的 tr
元素的 Angular 圆化
CSS
.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
做类似的样式时, Angular 不是圆的?
.tbody .rounded {
background: red;
border-radius: 7px;
}
背景确实显示为红色。
最佳答案
如果你的表设置为border-collapse: separate
(默认)那么边界半径可能会或可能不会应用于 <tbody>
, 取决于浏览器;该行为在规范中未定义。
根据规范 — CSS Backgrounds and Borders Module Level 3 (强调我的):
The effect of border-radius on internal table elements is undefined in CSS3 Backgrounds and Borders, but may be defined in a future specification. CSS3 UAs should ignore border-radius properties applied to internal table elements when ‘border-collapse’ is ‘collapse’.
为了获得一致的结果,根据您的示例,您必须设置 tbody
至 display: block
as suggested in this answer .这会在一定程度上破坏表格行为,但可能会有用。
关于html - 四舍五入html表体的 Angular 落,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27596097/