Как нарисовать круг CSS

Question

Я следующий таблицей:

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

и хочет нарисовать зеленый круг в последней колонке. CSS:

.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/
любой отзыв?

Answer 1

Что-то вроде этого?

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

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

И ваш HTML содержат небольшую ошибку, ваш HTML является: <td/>, но правильный формат: </td>