舍入html表体的角。

Question

这是一个小提琴

我试图绕过tbody元素的角，但没有成功。

我能够绕着tr元素的角落在tbody中使用以下内容

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做类似的样式时，角不是圆角的吗？

.tbody .rounded {

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

背景看起来确实是红色的。

Answer 1

如果您的表被设置为border-collapse: separate (默认值)，则边框半径可能(也可能不会)应用于<tbody>，具体取决于浏览器；规范中没有定义这种行为。

根据规范- CSS背景和边界模块3级 (强调地雷)：

边界半径对内部表元素的影响在CSS3背景和边界中是未定义的，但可能在未来的规范中定义。当“边界崩溃”为“崩溃”时，CSS3 UAs应该忽略应用于内部表元素的边框半径属性。

为了获得一致的结果，根据您的示例，您必须将tbody设置为display: block 如本答案所示。这将在某种程度上打破表的行为，但可能是有用的。

Answer 2

试试这个。，

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