在表格单元格的中间绘制圆圈

Question

如何在一个我知道使用的表格单元格中绘制一个完美的圆圈border-radius:50%;可以绘制圆形但是当单元格没有相同的宽度和高度时,圆形并不完美.我尝试做一些类似于图的事情.

我怎么能这样做CSS呢？

Answer 1

不确定这是否有帮助，但只需给你的圆圈一个高和宽，这样它就会始终是相同的大小。

table {
  border-collapse: collapse;
}
td{
  padding:5px;
  border:solid 1px #ccc;
  text-alig:
}
.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>