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

Question

我如何在表格单元格内绘制一个完美的圆，我知道使用border-radius:50%;可以绘制该圆，但是当单元格的宽度和高度不同时，该圆就不是完美的。我尝试做类似图中的事情。

如何仅使用CSS来做到这一点？

Answer 1

使用百分比来满足您的要求，例如：

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

其中包含文本的响应圈：https://codepen.io/nuriarai/pen/uIrFf

Answer 2

不确定这是否有帮助，只需简单地给圆加高和加宽，使其始终保持相同大小即可。

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>

Answer 3

看看这种方法：

.round-button{
  border-radius: 50%;
  display: inline-block;
  width: 50%;
  height: 50%;
  padding: 20% 0%;
  background: white;
  border: solid 5px black;
  text-align: center;
}

table{
  width: 100%;
  text-align: center;
}

table, td, tr{
  border: solid 1px black;
}

<table>
  <tbody>
    <tr>
      <td>Something</td>        
      <td>Something</td>
      <td>Something</td>
      <td><span class="round-button">TEXT</span></td>
    </tr>
    <tr>
      <td>Something</td>        
      <td>Something</td>
      <td>Something</td>
      <td><span class="round-button">TEXT</span></td>
    </tr>
  </tbody>
</table>

Answer 4

CSS background & background-size Properties

在标记（例如<figure>）内放置圆圈的背景图像，并在<figcaption> s的最后一列中为文本（例如<td>）嵌套另一个标记。它的缩放比例非常好，可以在整页中看到它，并且圆是固定大小的（因此所有圆都将具有相同的尺寸），但仍会响应（因此，只要表格也响应，所有圆都会缩放到视口尺寸）。

---

background

background是大量background-*属性的简写，但我们将使用以下内容：

• background-image
• background-repeat
• background-position

---

background-size

此属性确定background-image的行为：

• cover-扩展到边框，如果不合适，它将被裁剪*
• contain-延伸至边界并停止-我们将使用此值。
• 其他值与此无关，有关详细信息，请参见上面提供的链接。
  * _{仅将cover列为关注点，我们将不会使用它}

---

演示

* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  font: 400 5vh/7.5vh Consolas;
}

table {
  border: 1px solid #000;
  table-layout: fixed;
  border-collapse: collapse;
  min-width: 100%;
  min-height: 65.25%;
}

td {
  border: 1px solid #000;
  min-height: 7.5vh;
  vertical-align: top;
  padding: 0.5vh 0.5vw;
  width: 25%;
}

tr td:last-of-type {
  text-align: center;
  vertical-align: middle;
}

.circle {
  text-align: center;
  vertical-align: middle;
  display: inline-block;
  height: 7.5vw;
  width: 7.5vw;
  background: url(https://i.ibb.co/ChN5VkB/circle.png)no-repeat center;
  background-size: contain;
}

.circle figcaption {
  display: inline-block;
  margin: calc(50% - 3.75vh) auto;
}

<table>
  <tr>
    <td>Text<br>Text<br>Text</td>
    <td>Text</td>
    <td>Text</td>
    <td>
      <figure class='circle'>
        <figcaption>Text</figcaption>
      </figure>
    </td>
  </tr>
  <tr>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
    <td>
      <figure class='circle'>
        <figcaption>Text</figcaption>
      </figure>
    </td>
  </tr>
  <tr>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
    <td>
      <figure class='circle'>
        <figcaption>Text</figcaption>
      </figure>
    </td>
  </tr>
  <tr>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
    <td>
      <figure class='circle'>
        <figcaption>Text</figcaption>
      </figure>
    </td>
  </tr>
</table>