圆化html表格主体的角落答案

【问题标题】：rounding the corners of html table body圆化html表格主体的角落
【发布时间】：2014-12-22 13:02:42
【问题描述】：

我尝试绕过tbody 元素的角落没有成功。

我能够使用以下方法绕过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;
}

背景确实显示为红色。

【问题讨论】：

你能发布html吗？
使用诸如 jsfiddle 之类的东西会非常有帮助，而且更有可能会回答您的问题。
您不能在 Tbody 上设置边框。您必须将边框半径放在表格元素上。此页面应该为您提供更多信息：codepen.io/anon/pen/xiaCc，在另一个问题上找到它：stackoverflow.com/questions/19756736/…。它设置边界单元的边界。（并不总是可取的，但可以解决）。
@Bubby4j Fiddle 发布感谢您的提示
将 tbody 角倒圆而不是实际的桌角有什么好处？ jsfiddle demo

标签： html css html-table rounded-corners

【解决方案1】：

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

根据规范——CSS Backgrounds and Borders Module Level 3（强调我的）：

border-radius 对内部表格元素的影响未定义 CSS3 背景和边框，但将来可能会定义规格。 CSS3 UA 应忽略应用的边框半径属性当“border-collapse”为“collapse”时，到内部表格元素。

为了获得一致的结果，根据您的示例，您必须将 tbody 设置为 display: block as suggested in this answer。这会在一定程度上破坏表格行为，但可能很有用。

【讨论】：

【解决方案2】：

试试这个。

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

【讨论】：