Utilisez le pourcentage pour répondre à vos besoins, comme:

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

Cercles réactifs contenant du texte: https://codepen.io/nuriarai/pen/uIrFf

Je ne sais pas si cela vous aide, mais donnez simplement à votre cercle une hauteur et une largeur pour qu'il soit toujours de la même taille.

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

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
  
}

Jetez un œil à cette approche:

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

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

CSS arrière-plan & background-size Propriétés

Placez une image d'arrière-plan d'un cercle dans une balise (ex.

), et imbriquez une autre balise pour le texte ( ex. ) dans la dernière colonne de s. Il est parfaitement mis à l'échelle pour le voir en pleine page et le cercle est de taille fixe (donc tous les cercles auront les mêmes dimensions) mais toujours réactif (donc tous les cercles seront mis à l'échelle des dimensions de la fenêtre tant que le tableau sera également réactif).

---

background code>

Le background est un raccourci pour une tonne de propriétés background- * mais nous utiliserons simplement ce qui suit: p >

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

---

background-size

Cette propriété détermine le comportement de l ' background-image :

• cover - s'étend jusqu'aux bordures et s'il ne rentre pas, il sera rogné *
• contiennent - s'étend jusqu'aux bordures et aux arrêts - nous utiliserons cette valeur.
• Les autres valeurs ne sont pas pertinentes, voir le lien ci-dessus pour plus de détails.
  * _{En mentionnant simplement cover comme point d'intérêt, nous ne l'utiliserons pas}

---

Demo

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

* {
  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;
}