Agfdhyk

I was wondering if it is possible to make a circular html table ?
In other words, I'd like to put td elements in circle. The closest example I found is this: But this is not an html table. it is a list. I tried this code but I couldn't make it work the way it should be.

I have a table like this:

<table class='ctb'>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

<td>5</td>

<td>6</td>

<td>7</td>

<td>8</td>

<td>9</td>

<td>10</td>

<td>11</td>

<td>12</td>

<td>13</td>

<td>14</td>

<td>15</td>

<td>16</td>

<td>17</td>

<td>18</td>

<td>19</td>

<td>20</td>

<td>21</td>

<td>22</td>

<td>23</td>

<td>24</td>

<td>25</td>

  </tr>

</table>

Use code as below:

See here:https://codepen.io/leenmalka/pen/rQxEea

 <table class='circle-container'>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

<td>5</td>

<td>6</td>

<td>7</td>

<td>8</td>

<td>9</td>

<td>10</td>

<td>11</td>

<td>12</td>

<td>13</td>

<td>14</td>

<td>15</td>

<td>16</td>

<td>17</td>

<td>18</td>

<td>19</td>

<td>20</td>

<td>21</td>

<td>22</td>

<td>23</td>

<td>24</td>

<td>25</td>

  </tr>

</table>

Css:

@import "compass/css3";



@mixin on-circle($item-count, $circle-size, $item-size) {  

  position: relative;

  width:  $circle-size;

  height: $circle-size;

  border-radius: 50%;

  padding: 0; 



  > * {

    display: block;

    position: absolute;

    top:  50%; 

    left: 50%;

    margin: -($item-size / 2);

    width:  $item-size;

    height: $item-size;



    $angle: (360 / $item-count);

    $rot: 0;



    @for $i from 1 through $item-count {

      &:nth-of-type(#{$i}) {

        transform: rotate($rot * 1deg) translate($circle-size / 2) rotate($rot * -1deg);

      }



      $rot: $rot + $angle;

    }

  }

}



.circle-container tr{

  @include on-circle($item-count: 25, $circle-size: 20em, $item-size: 1em); 

  margin: 5em auto 0;

  border: solid 5px tomato;



  td { 

    display: block; 

    max-width: 100%; 

    border-radius: 50%;

    filter: grayscale(100%);

    border: solid 5px tomato;

    transition: .15s;



    &:hover {

      filter: grayscale(0);

    }

  }

}