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

draw circle on intersection of table cells HTML

I want to draw a circle on the intersections of html tables, but I am not sure how to get shapes into html tables. I want it to look like something just like picture below. I tried to use text and span, such as using border-radius to get the circle shape but I can’t seem to figure out how to make it appear on the intersections.

circle on intersection of tables

Tags:

2

Answers


  1. 0

    You could use the ::after pseudo-element like this:

    /* Basic styling for demo */
table {
  border-collapse: collapse;
}
td {
  padding: 4px;
  border: 1px solid lightgray;
  position: relative;
}

/* Adds a red circle to the bottom-right of every cell */
td::after {
  content: "";
  position: absolute;
  right: -2px;
  bottom: -2px;
  background-color: red;
  width: 4px;
  height: 4px;
  border-radius: 50%;
}

/* Adds a blue circle to the bottom-right of the cells in the first column */
td:first-child::after {
  background-color: blue;
}

/* Adds a green circle to the bottom-right of the cells in the last column */
td:last-child::after {
  background-color: green;
}

/* Adds a black circle to the bottom-right of the cells with the class "dot" */
td.dot::after {
  background-color: black;
}
    <table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td class="dot">3</td>
    <td>4</td>
    <td>5</td>
  </tr>
  <tr>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
  </tr>
  <tr>
    <td>11</td>
    <td>12</td>
    <td>13</td>
    <td>14</td>
    <td>15</td>
  </tr>
</table>

    This code will give you a small red circle on the bottom-right corner of every table cell. Starting with that, you can be more specific with what cell to add that circle using classes or pseudo-classes.

    EDIT:

    Added other examples using pseudo-classes.

    Also, to explain what’s happening:

    What does the trick is the position: relative in the td and the position: absolute in the ::after pseudo-element.

    This allows us to position the pseudo-element relative to its parent, the table cell. Meaning, if we use right: 0, our circle will be positioned starting on the right side of the table cell.

    So, we set right and bottom to the negative half of the width/height of the circle (the radius) so its center point is positioned on the intersection.

    Finally, border-radius gives us the round shape we want.

    Login or Signup to reply.
  2. 0

    You can create pseudo element to draw circle and position it within the table.

    td{
    width: 50px;
    height: 50px;
}

/* Creating a pseudo element before the 3rd cell of the 2nd row */
tr:nth-child(2) td:nth-child(3):before{
    content: '⚫';
    position: relative;
    top: -28px;
    left: -12px;
    /* You can use position relative and change the position of the element */
}
    <table border="1" style="border-collapse: collapse;">
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search