我在创建自定义表的 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);
}<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>最佳答案
您正走在正确的轨道上，只是在 left 中进行了一些更改和一些 padding在 td
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 16px;
}
td{
padding-right: 22px;
}
.container {
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;
left: -38px;
top: 50%;
text-align: center;
line-height: 37px;
transform: translate(0%, -50%);
}<html>
<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>
<tr>
<td>Eve</td>
<td><div class="container">
<div class="circle">
test
</div>
</div></td>
<td>94</td>
</tr>
<tr>
<td>Eve</td>
<td><div class="container">
<div class="circle">
test
</div>
</div></td>
<td>94</td>
</tr>
</table>
</html>关于html - 表格边框上的圆形，其中有文字，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59543143/