小编saj*_*adi的帖子

表格边框上的圆形,其中有文字

我在创建自定义表的 html css 中遇到了很大的挑战在此处输入图片说明

我不知道在这种情况下创建我想在边界的垂直线上创建圆形我创建这个表。但这些是非常不同的:-D

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
    
}
.container {
  width: 100px;
  height: 1px;
  background-color: black;
  position: relative;
}
.circle {
  display: inline-block;
  vertical-align: middle;
  width: 40px;
  height: 40px;
  background-color: white;
  border: solid 1px black;
  border-radius: 50%;
  position: absolute;
  top: -6px;
  left: calc(50% - 5px);
}
Run Code Online (Sandbox Code Playgroud)
<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>
      <div class="container">
        <div class="circle">test</div>
      </div>
    </td> 
    <td>94</td>
  </tr>
</table>
Run Code Online (Sandbox Code Playgroud)

html css

7
推荐指数
1
解决办法
205
查看次数

标签 统计

css ×1

html ×1