Issue
How can I draw a perfect circle inside a table cell I know using border-radius:50%;
can draw the circle but when the cell not have the same width and height the circle is not perfect. I try to do something like the figure.
How can I do this just with CSS
?
Solution
Not sure if this helps but simply give your circle a high and width so it will always be the same size.
table {
border-collapse: collapse;
}
td{
padding:5px;
border:solid 1px #ccc;
text-align: center;
}
.circle{
background-color:blue;
display:block;
height:50px;
width:50px;
border-radius:50%;
border:5px solid #000;
margin:auto;
color:#fff;
line-height:50px;
text-align:center
}
<table>
<tr>
<td>Some text</td>
<td>Some Text</td>
<td>some Text</td>
<td>
<span class="circle">
text
</span>
</td>
</tr>
<tr>
<td>Some text<br>Some text Some text<br> Some text <br>text</td>
<td>Some Text</td>
<td>some Text</td>
<td>
<span class="circle">
text
</span>
</td>
</tr>
</table>
Answered By - David Najar
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.