Question

我想知道是否可以制作一个圆形的html表？换句话说，我想将td元素圈起来。我发现的最接近的示例是this：但这不是html表。这是一个列表。我尝试了这段代码，但无法使其正常工作。

我有一个像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>

Answer 1

使用以下代码：

查看此处：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);
    }
  }
}

圆形HTML表格

1 个答案: