CSS：表

Question

我有一个带有border-radius和border-color的span元素。

它显示得很好，但是当在table元素中显示圆形效果但是它周围的边框变成矩形而没有圆角。

小提琴：http://jsfiddle.net/hXMLF/1182/

小提琴

以span为文本的

Two以所需颜色显示圆形边框。

但span One作为table内的文字显示为矩形边框。边界半径已经应用了，如果仔细观察就可以看到一个黄色的椭圆形。

期望的行为是，应该为椭圆形的两个跨度显示红色边框，只有黄色椭圆形。

Answer 1

您不应该使用table-cell块设置span一个显示属性。尝试其他值：阻止或其他

Answer 2

我认为这与jsfiddle有关。相同的代码使用SO代码片段。

＆＃13;

＆＃13;

body {
  background-color: #efefef;
}
table {
  border: 1px solid black
}
td {
  border: 1px solid black;
  padding: 10px;
}
.round-round {
  border-radius: 15px;
  background-color: yellow;
  display: table-cell;
  border: 1px solid red;
}

＆＃13;

<table cellpadding="10">
  <tr>
    <td>
      <span class="round-round"> One </span>
    </td>
    <td>
      Something else
    </td>
  </tr>
</table>

<hr>

<span class="round-round"> Two </span>

＆＃13;

＆＃13;

＆＃13;