html - 四舍五入html表体的 Angular 落

Question

这是一个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;
}

背景确实显示为红色。

Answer 1

如果你的表设置为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 .这会在一定程度上破坏表格行为，但可能会有用。