html - 使用一个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 并且我们不允许在 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;
}

<table>
  <tr>
    <td class="circle">1</td>
    <td class="circle">2</td>
    <td class="circle">3</td>
    <td class="circle">4</td>
  </tr>
</table>