nasıl masaya aşağıdakilere sahip bir daire css

Question

çizmek için. CSS:

yüzden çemberin değil hücre etrafına çerçeve çiziyor yaparken ben hücre için sınırlarını çizmek gerekir, ancak

.Green{ 
    font-size:0px; 
    border-radius: 50%; 
    width: 50px; 
    height: 50px; 
    display:inline-block; 
    background: green!important; 
    border:solid black 3px;} 
td { 
    border:solid black 3px;} 

. https://fiddle.jshell.net/Ulee/up3a5fp4/
herhangi bir ipucu?

Answer 1

Böyle bir şey mi var?

.green:after { 
 
    content: ""; 
 
    border-radius: 50%; 
 
    width: 50px; 
 
    height: 50px; 
 
    display: inline-block; 
 
    background: green!important; 
 
    vertical-align: middle; 
 
} 
 

 
.green { 
 
    font-size: 0; 
 
} 
 

 
td { 
 
    border: 3px solid #000; 
 
}

<table> 
 
    <tr role="row" class="even"> 
 
    <td>Other Color</td> 
 
    <td class="green">Green</td> 
 
    </tr> 
 
</table>

Answer 2

css: <td/>, ancak doğru biçimidir:

.Green{ 
    border:solid green 3px; 
    font-size:0px; 
    border-radius: 50%; 
    width: 50px; 
    height: 50px; 
    display:inline-block; 
    background: green!important; 
} 
td { 
    border:solid black 3px; 
} 

Ve html küçük bir hata içeriyor

, html ise </td>