Question 43629 in Html Question posted in
Some basic documentation can be found here.

How to draw a circle around a number WITHOUT moving it? – Html

There are plenty of examples of drawing circles around numbers using border-radius. However, the problem I have is that I am displaying numbers in columns and rows (in a table) to form a calendar and when I add a class to put a circle around a selected date using this method it moves the number. I find myself having to fiddle around with padding and such to get both the circle in the right place and the number centered in the circle properly… and then it only works for the precise sizing I set it up for. If someone were to say "can you make that font a bit bigger/smaller" then I would have go through this trial and error process again.

So how can I put a circle around a number without moving the position of the number where it was before I added the circle (and, obviously, have the circle centered on the number)?

Tags:

3

Answers


  1. 0

    A trick you could use is a CSS radial gradient of a transparent "halo":

    td {
  width: 3em;
  height: 3em;
  border: 1px solid silver;
  padding: 0;
  text-align: center;
  background: radial-gradient(circle, rgba(255, 255, 255, 0) 0%, rgba(17, 17, 121, 0) 65%, rgba(9, 9, 116, 1) 66%, rgba(9, 9, 121, 0) 70%, rgba(255, 255, 255, 0) 100%);
  background-size: 100% 100%;
}
    <table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>64</td>
  </tr>
</table>
    Login or Signup to reply.
  2. 0

    You can achieve this by using a combination of CSS ::before or ::after pseudo-elements along with position: absolute;.

    body {
  font-family: Arial, sans-serif;
}

table {
  border-collapse: collapse;
}

td {
  padding: 20px;
  text-align: center;
  position: relative;
}

.number {
  display: inline-block;
}

.number.selected::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid black;
  border-radius: 50%;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Circle Around Number</title>
</head>
<body>
  <table>
    <tr>
      <td><span class="number">1</span></td>
      <td><span class="number">2</span></td>
      <td><span class="number">3</span></td>
    </tr>
    <tr>
      <td><span class="number">4</span></td>
      <td><span class="number selected">5</span></td>
      <td><span class="number">6</span></td>
    </tr>
    <tr>
      <td><span class="number">7</span></td>
      <td><span class="number">8</span></td>
      <td><span class="number">9</span></td>
    </tr>
  </table>
</body>
</html>
    Login or Signup to reply.
  3. 0

    Without knowing the specifics of your HTML, I would suggest using ::after pseudo-class. By doing so, we are drawing a circle "after" the number, but with absolute placement we are centering it in the td. And since the number is also centered in the td, we have a perfect circle around our number.

    td {
  width: 3em;
  height: 2em;
  text-align: center;
  padding: 5px 0;
}
.circled {
  position: relative;
}
.circled::after {
  content: "";
  position: absolute;
  width: 2em;
  height: 2em;
  border: 1px solid red;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
    <table>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td class="circled">5</td>
      <td>6</td>
      <td>7</td>
    </tr>
    <tr>
      <td>8</td>
      <td>9</td>
      <td>10</td>
      <td class="circled">11</td>
      <td>12</td>
      <td>13</td>
      <td>14</td>
    </tr>
    <tr>
      <td>15</td>
      <td>16</td>
      <td>17</td>
      <td>18</td>
      <td>19</td>
      <td>20</td>
      <td class="circled">21</td>
    </tr>
    <tr>
      <td class="circled">22</td>
      <td>23</td>
      <td>24</td>
      <td>25</td>
      <td>25</td>
      <td>27</td>
      <td>28</td>
    </tr>
  </tbody>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search