时间戳

首页 > 解决方案 > 在边框上创建一个带有数字圆圈的 CSS 表格

css - 在边框上创建一个带有数字圆圈的 CSS 表格

问题描述

我试图通过边框创建一个带有数字的简单表格 - 类似于定价表。

我想在单独的表格中显示我们搏击俱乐部的一些报价 - 添加了图像。

创建自定义表格和圆形数字圆不是问题，但是将带有数字的圆定位在边框上对我来说太难了。

.frametable {
  border-radius: 25px;
  border: 2px solid #56b6f9 !important;
  padding: 1px;
}

.circlenumber::before {
    font-size: 2rem;
    z-index: 5;
    text-align: center;
    color: white;
    background: #1e73be;
    border-radius: 100%;
    padding: 10px;
    content: "1";
}
<table class="frametable">
  <thead class="circlenumber">
  </thead>
  <tr>
  <td>A Box with some Text</td>
  </tr>
</table>

我真的很感激任何帮助:)

标签： cssgeometryborder

解决方案

我找到了这种解决方案。我希望这个对你有用。

  <!DOCTYPE html>
    <html>
    <head>
      <title>sample</title>
      <style>
        .div {
          margin-top: 50px;
          width: 200px;
          height: 300px;
          border-color: blue;
          border:3px solid blue;
          display: flex;
          justify-content: center;
        }
        .div-circle {
          width: 60px;
          height: 60px;
          border: 3px solid blue;
          border-color: blue;
          border-radius: 60px;
          position: relative;
          background-color: blue;
          bottom: 30px;
          display: flex;
          justify-content: center;
          align-items: center;
          color: white;
          font-size: 40px;
        }
      </style>
    </head>
    <body>
      <div class="div">
        <div class="div-circle">
          <span>1</span></div>
      </div>
    </div>
    </body>
    </html>

推荐阅读