如何将HTML表格单元格对齐为圆圈

时间：2016-11-04 15:31:10

标签： html css

我正在尝试用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>

但我更愿意将细胞（=灰色小圆圈）对齐成一个圆圈，这样它看起来更像一个指南针，它会如何工作？ 如果细胞位于表格边界之外或内部（=黑色大圆圈）并不重要，重要的是，细胞像圆圈一样对齐。 我试图画它，而不是一个完美的圆圈，但它应该看起来像这样： enter image description here

当我搜索SO和网页上的HTML表格/单元格对齐为圆形时，我找到了很多例子，说明如何将表格的圆角变成圆形而不是将表格中的单元格对齐为圆形。

或者我在思考错误的方式，应该选择其他方式来实现这个目标吗？

1 个答案:

答案 0 :(得分：1)

你介意使用javascript吗？

如果不是这里的解决方案，@ Paulie_D评论了一个链接，所以我已经调整它不使用Jquery。

＆＃13;
＆＃13; 
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'));
＆＃13; 
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%);
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题