Create a reponsive event marker

i want to make my marker responsive i have a link <a> attribute with defined class fc-event and i want to place it inside or behind the <td> which is inside my thead.

<table>
   <thead>
      <tr>
          <td><span class="fc-day-number">10</span></td>
      </tr>
   </thead>
   <tbody>
      <tr>
         <a class=" fc-event "><div class="fc-content"><span>12a</span></div></a>
      </tr>
   </tbody>
</table> 

Below is the approached i used only problem is that it is not responsive

 .fc-event {
        display: block; /*This is the approach*/
        border-radius: 100%;
        width: 40px;
        height: 40px;
        background-color: rgba(3,169,244,0.71);
        top: 1;
        margin-left: 5%;
    }