html - 如何将 HTML 表格单元格对齐为圆形

Question

我正在尝试用 HTML 创建某种指南针，我已经走到这一步了:

.devicecompass {
  display: inline-block;
  background-clip: padding-box;
  border-radius: 100%;
  border: 1px solid black;
}
td {
  background-clip: padding-box;
  border-radius: 100%;
  border: 1px solid black;
  background-color: #fff;
  text-align: center;
  width: 60px;
  height: 60px;
  line-height: 60px;
}
td a div {
  background-clip: padding-box;
  border-radius: 100%;
  background-color: #aaa;
}
td a div:hover {
  opacity: 0.0;
}
td#e {
  border: 0px;
  background-color: fff;
}
td#router a div {
  background-color: #0a0;
}
td#n5 {
  background-image: url("http://www.eurodk.lv/images/catalogue/directional/&product-view-small&nanobeam400.jpg"); 
}
/* .17 */

td#nno5 {}
/* .18 */

td#no5 {}
/* .19 */

<!-- 5 GHz devices -->
<div class="devicecompass">
  <table>
    <tr>
      <td id="nw5">
        <a href="http://10.26.51.31">
          <div>nw5</div>
        </a>
      </td>
      <td id="nnw5">
        <a href="http://10.26.51.32">
          <div>nnw5</div>
        </a>
      </td>
      <td id="n5">
        <a href="http://10.26.51.17">
          <div>n5</div>
        </a>
      </td>
      <td id="nno5">
        <a href="http://10.26.51.18">
          <div>nno5</div>
        </a>
      </td>
      <td id="no5">
        <a href="http://10.26.51.19">
          <div>no5</div>
        </a>
      </td>
    </tr>
    <tr>
      <td id="wnw5">
        <a href="http://10.26.51.30">
          <div>wnw5</div>
        </a>
      </td>
      <td id="e">nw</td>
      <td id="e">n</td>
      <td id="e">no</td>
      <td id="ono5">
        <a href="http://10.26.51.20">
          <div>ono5</div>
        </a>
      </td>
    </tr>
    <tr>
      <td id="w5">
        <a href="http://10.26.51.29">
          <div>w5</div>
        </a>
      </td>
      <td id="e">w</td>
      <td id="router">
        <a href="#">
          <div>compass</div>
        </a>
      </td>
      <td id="e">o</td>
      <td id="o5">
        <a href="http://10.26.51.21">
          <div>o5</div>
        </a>
      </td>
    </tr>
    <tr>
      <td id="wsw5">
        <a href="http://10.26.51.28">
          <div>wsw5</div>
        </a>
      </td>
      <td id="e">sw</td>
      <td id="e">s</td>
      <td id="e">so</td>
      <td id="oso5">
        <a href="http://10.26.51.22">
          <div>oso5</div>
        </a>
      </td>
    </tr>
    <tr>
      <td id="sw5">
        <a href="http://10.26.51.27">
          <div>sw5</div>
        </a>
      </td>
      <td id="ssw5">
        <a href="http://10.26.51.26">
          <div>ssw5</div>
        </a>
      </td>
      <td id="s5">
        <a href="http://10.26.51.25">
          <div>s5</div>
        </a>
      </td>
      <td id="sso5">
        <a href="http://10.26.51.24">
          <div>sso5</div>
        </a>
      </td>
      <td id="so5">
        <a href="http://10.26.51.23">
          <div>so5</div>
        </a>
      </td>
    </tr>
  </table>
</div>

但我更愿意将单元格(=灰色小圆圈)对齐成一个圆圈，这样它看起来更像一个指南针，这将如何工作？ 单元格是在表格边框外还是在表格边框内(=黑色大圆圈)并不重要，重要的是，单元格像圆圈一样对齐。 我试着画它，不是一个完美的圆，但它应该看起来像这样:

当我在 SO 和网络上搜索对齐为圆形的 HTML 表格/单元格时，我发现了很多示例如何将表格的 Angular 圆化为圆形而不是将表格内的单元格对齐为圆形。

还是我想错了，应该选择另一种方式来完成？

Answer 1

你介意使用 javascript 吗？

如果这里没有适合您的解决方案，@Paulie_D 评论了一个指向它的链接，因此我已将其修改为不使用 Jquery。

function calcCircle(a) {
  for (var i = 0; i < a.length; i++) {
    var container = a[i].parentElement,
      width = container.offsetWidth,
      height = container.offsetHeight,
      radius = width / 2,
      step = (2 * Math.PI) / a.length;

    var x = width / 2 + radius * Math.cos(step * i) - a[i].offsetWidth / 2;
    var y = height / 2 + radius * Math.sin(step * i) - a[i].offsetHeight / 2;

    a[i].style.left = x + 'px';
    a[i].style.top = y + 'px';
  }
}
calcCircle(document.querySelectorAll('#compass > .point'));
calcCircle(document.querySelectorAll('#compass > .inner-compass > .point'));

body {
  margin: 0;
}
#compass {
  position: relative;
  width: 400px;
  height: 400px;
  /* the radius of .item (half height or width) */
  margin: 30px;
}
#compass .point {
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  border-radius: 50%;
  position: absolute;
  background: #777;
}
#compass .inner-compass {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#compass .inner-compass .point {
  background: #ccc;
}
#compass .center-point {
  width: 70px;
  height: 70px;
  line-height: 70px;
  text-align: center;
  border-radius: 50%;
  position: absolute;
  background: green;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div id="compass">
  <div class="point">E</div>
  <div class="point">ESE</div>
  <div class="point">SE</div>
  <div class="point">SSE</div>
  <div class="point">S</div>
  <div class="point">SSW</div>
  <div class="point">SW</div>
  <div class="point">WSW</div>
  <div class="point">W</div>
  <div class="point">WNW</div>
  <div class="point">NW</div>
  <div class="point">NNW</div>
  <div class="point">N</div>
  <div class="point">NNE</div>
  <div class="point">NE</div>
  <div class="point">ENE</div>
  <div class="inner-compass">
    <div class="point">E</div>
    <div class="point">SE</div>
    <div class="point">S</div>
    <div class="point">SW</div>
    <div class="point">W</div>
    <div class="point">NW</div>
    <div class="point">N</div>
    <div class="point">NE</div>
  </div>
  <div class="center-point">Compass</div>
</div>