使用一个div在表格单元格中定位圆圈

Question

我是html和css的新手，并且有一个有趣的问题。我想在表格单元格中放置一个高度和宽度为40px的红色圆圈，并保持这个高度和宽度，无论表格单元格的高度或宽度如何。所以它看起来如下：

圆圈始终居中且尺寸相同，单元格的其余部分为空白。如果可能的话，我也想这样做，只使用一个css类，如下所示：

   td.circle {
        background: #f00;
        width: 40px;
        height: 40px;
        right:50%;
        bottom: 50%;
        vertical-align: middle;
        transform: translate (50%,50%);
        border-radius: 50%;
    }

目前，我已经使用单元格的宽度或高度扩展了圆圈和高度，有没有办法阻止这种情况发生？

Answer 1

如果您不能在td中添加div并将其用作您的圈子，那么它听起来像是伪元素的作业。

table {
  width: 80%;
  margin: 1em auto;
}
td {
  border: 1px solid grey;
}
td.circle:before {
  content: attr(data-char);
  display: block;
  background: #f00;
  width: 40px;
  height: 40px;
  line-height:40px;
  text-align:center;
  vertical-align: middle;
  border-radius: 50%;
  margin:0 auto;
}

<table>
  <tr>
    <td class="circle" data-char="H"></td>
    <td class="circle" data-char="I"></td>
    <td class="circle" data-char="J"></td>
    <td class="circle" data-char="K"></td>
  </tr>
</table>

第二个解决方案

老实说我不喜欢实际背景图片但是如果它必须是纯CSS而且我们不允许{{>内的任何元素1}}我们可以使用受限制的圆形径向渐变。

td

.circle {
  background-image:
    -webkit-radial-gradient(
      circle,
      red, red 20px, transparent 20px
    );
  background-image:
    radial-gradient(
      circle,
      red, red 20px, transparent 20px
    );
border:1px solid grey;
}

table {
  width: 80%;
  margin: 1em auto;
  table-layout: fixed;
  text-align: center;
}

td {
  height: 40px;
}

Answer 2

你可以用div做这样的事。

table {
  width: 50%;
}
td {
  border: 1px solid;
  text-align: center;
  vertical-align: middle;
  width: 25%;
  height: 80px;
}
.circle {
  content: "";
  background: transparent;
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  border: 3px solid red;
  border-radius: 50%;
}

<table>
  <tr>
    <td><div class="circle">H</div></td>
    <td><div class="circle">I</div></td>
    <td><div class="circle">J</div></td>
    <td><div class="circle">K</div></td>
  </tr>
</table>

根据评论进行更新。

以下是使用position: absolute的Paulie伪替代，但我仍然建议使用<td class="circle" data-char="H"></td>。它提供了更好的控制，因为字母在伪内部，而不是外部，因为这需要。

table {
  width: 50%;
}
td {
  border: 1px solid;
  text-align: center;
  vertical-align: middle;
  width: 25%;
  height: 80px;
  position: relative;
}
.circle:before {
  content: "";
  background: transparent;
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  border: 3px solid red;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

<table>
  <tr>
    <td class="circle">H</td>
    <td class="circle">I</td>
    <td class="circle">J</td>
    <td class="circle">K</td>
  </tr>
</table>