舍入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级(强调我的):

border-radius对内部表元素的影响在CSS3背景和边框中是未定义的,但可以在将来的规范中定义.当'border-collapse'为'collapse'时,CSS3 UAs应忽略应用于内部表元素的border-radius属性.

对于一致的结果,根据你的榜样,你就必须设置tbody到display: block 在这个答案建议.这会稍微破坏表的行为,但可能会有用.