HTML表格主体圆角处理

Question

这里有一个演示

我尝试对一个 tbody 元素的边角进行圆角处理但没有成功。

我通过以下CSS代码，成功对 tbody 中的 tr 元素进行了圆角处理：

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;
}

背景确实显示为红色。

- ma77c

---

你能发布HTML吗？ - jmore009

使用像 jsfiddle 这样的工具会非常有帮助，也更有可能得到你问题的答案。 - James T

你不能在Tbody上放置边框。你必须在table元素上设置border-radius。这个页面应该会给你更多的信息：http://codepen.io/anon/pen/xiaCc，它是在另一个问题上找到的：https://dev59.com/T3jZa4cB1Zd3GeqPhLa3。它设置了相邻单元格的边框。（不总是理想的解决方案，但可以解决）。 - Mouser

@Bubby4j 发布了 Fiddle，感谢提示。 - ma77c

将tbody角落舍入而不是实际的表角有什么好处？[jsfiddle演示]（http://jsfiddle.net/woahLcuk/1/） - JRulle

Answer 1

如果您的表格设置为border-collapse: separate（默认情况下），则取决于浏览器，边框半径可能会或可能不会应用于<tbody>；在规范中，这种行为是未定义的。

根据规范 - CSS背景和边框模块3级（我强调）：

CSS3背景和边框对内部表格元素的border-radius效果没有定义，但可能在将来的规范中进行定义。当“border-collapse”为“collapse”时，CSS3 UAs应忽略应用于内部表格元素的border-radius属性。

根据您的示例获得一致的结果，您需要将tbody设置为display:block，就像此答案中建议的那样。这会在某种程度上破坏表格的行为，但可能很有用。

- misterManSam

Answer 2

尝试这个。

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

- Sathish