CSS: border-Radius und Farbe nicht innerhalb der Tabelle berücksichtigt

Question

Ich habe ein span-Element mit Border-Radius und Border-Farbe.

Es zeigt sich gut, aber wenn im Tabellenelement der runde Effekt gezeigt wird, wird die Umrandung rechteckig ohne runde Ecken.

Fiddle: http://jsfiddle.net/hXMLF/1182/

In der Geige

span mit Two als Text zeigt die runde Grenze in der gewünschten Farbe.

Aber die span mit One als Text, der innerhalb der table ist, zeigt eine rechteckige Grenze. Der Grenzradius wurde angewendet, wenn Sie genau hinsehen, können Sie ein gelbes Oval sehen.

Gewünschtes Verhalten ist, dass der rote Rand für beide Spannweiten in ovaler Form neben dem gelben Oval angezeigt werden sollte.

Answer 1

Sie sollten keine Anzeigeeigenschaft span mit Tabellenzellenblock festlegen. Versuchen Sie andere Werte: Block oder etwas anderes

Answer 2

Ich denke, es hat etwas mit jsfiddle zu tun. Derselbe Code funktioniert mit dem SO-Code-Snippet.

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

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