Draw circle in middle of a table cell [closed]

Question

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?

Answer 1

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>

Answer 2

Use the percentage to achieve your requirements like:

.circle {
  border-radius: 50%;
  width: 100%;
  padding-bottom: 100%;
  background: white;
}

Responsive circles with text inside: https://codepen.io/nuriarai/pen/uIrFf