Angular 我怎样才能合并这两个内边框，使之成为圆圈中间的一条宽线？
我正试着做这样的东西 因为它是动态的，所以我想我应该使用这个表格，但我被困在一个点上，我必须把两条内线合并成一条，并通过所有的圆。如何将内缘合并成圆中线的一条宽线？< /P> 嵌入链接：Angular 我怎样才能合并这两个内边框，使之成为圆圈中间的一条宽线？,angular,css,Angular,Css,我正试着做这样的东西 因为它是动态的，所以我想我应该使用这个表格，但我被困在一个点上，我必须把两条内线合并成一条，并通过所有的圆。如何将内缘合并成圆中线的一条宽线？< /P> 嵌入链接： 编辑链接：我已经看过了。要实现所需，可以删除中间的单元格，然后在第一个单元格中添加圆。然后将圆定位在右侧边界线上 我所做的是，使单元格的位置相对，圆圈的位置绝对，然后按你想要的方式定位 <!-- language: css --> .circle { border: 2px solid #a
编辑链接：我已经看过了。要实现所需，可以删除中间的单元格，然后在第一个单元格中添加圆。然后将圆定位在右侧边界线上 我所做的是，使单元格的位置相对，圆圈的位置绝对，然后按你想要的方式定位
<!-- language: css -->
.circle {
border: 2px solid #a1a1a1;
padding: 10px 40px;
background: #dddddd;
width: 1px;
height: 60px;
border-radius: 100px;
transform: scale(0.5, 0.5);
position: absolute;
right:-43px;
top: -15px;
}
th,
td {
padding: 0px;
position: relative;
}
.圆圈{
边框：2px实心#A1A1；
填充：10px 40px；
背景：#dddddd；
宽度：1px；
高度：60px；
边界半径：100px；
变换：比例（0.5,0.5）；
位置：绝对位置；
右：-43px；
顶部：-15px；
}
th，
运输署{
填充：0px；
位置：相对位置；
}
<!-- language: html -->
<table>
<tr>
<th width="50%"></th>
<th width="50%"></th>
</tr>
<tr>
<td>
11 july 2017
<br>
3:45 PM
<div class="circle"></div>
</td>
<td>$100</td>
</tr>
<tr>
<td>
Lois
<div class="circle"></div>
</td>
<td>$150</td>
</tr>
<tr>
<td>Joe
<div class="circle"></div>
</td>
<td>$300</td>
</tr>
<tr>
<td>
Cleveland
<div class="circle"></div>
</td>
<td>$250</td>
</tr>
</table>
2017年7月11日
下午3:45
$100
露易丝
$150
乔
$300
克利夫兰
$250
**更新了链接，我看了一下。要实现所需，可以删除中间的单元格，然后在第一个单元格中添加圆。然后将圆定位在右侧边界线上 我所做的是，使单元格的位置相对，圆圈的位置绝对，然后按你想要的方式定位
<!-- language: css -->
.circle {
border: 2px solid #a1a1a1;
padding: 10px 40px;
background: #dddddd;
width: 1px;
height: 60px;
border-radius: 100px;
transform: scale(0.5, 0.5);
position: absolute;
right:-43px;
top: -15px;
}
th,
td {
padding: 0px;
position: relative;
}
.圆圈{
边框：2px实心#A1A1；
填充：10px 40px；
背景：#dddddd；
宽度：1px；
高度：60px；
边界半径：100px；
变换：比例（0.5,0.5）；
位置：绝对位置；
右：-43px；
顶部：-15px；
}
th，
运输署{
填充：0px；
位置：相对位置；
}
<!-- language: html -->
<table>
<tr>
<th width="50%"></th>
<th width="50%"></th>
</tr>
<tr>
<td>
11 july 2017
<br>
3:45 PM
<div class="circle"></div>
</td>
<td>$100</td>
</tr>
<tr>
<td>
Lois
<div class="circle"></div>
</td>
<td>$150</td>
</tr>
<tr>
<td>Joe
<div class="circle"></div>
</td>
<td>$300</td>
</tr>
<tr>
<td>
Cleveland
<div class="circle"></div>
</td>
<td>$250</td>
</tr>
</table>
2017年7月11日
下午3:45
$100
露易丝
$150
乔
$300
克利夫兰
$250
**更新了链接是否尝试了伪元素？使用
：：在之前和：：在之后执行此操作，并移除第二个td的边框。希望这对你有帮助：）
p{
字体系列：Lato；
}
.圆圈{
边框：2px实心#A1A1；
填充：10px 40px；
背景：#dddddd；
宽度：1px；
高度：60px；
边界半径：100px；
变换：比例（0.5,0.5）；
}
.circle：：在{
背景色：#a1a1；
宽度：2倍；
高度：44px；
位置：绝对位置；
左：48%；
内容：“；
顶部：-58%；}
.circle：：在{
背景色：#a1a1；
宽度：2倍；
高度：44px；
位置：绝对位置；
左：48%；
内容：“；
底部：-55%；}
桌子
运输署，
th{
边框：1px实心#ddd；
文本对齐：居中；
}
桌子{
边界塌陷：塌陷；
宽度：100%；
}
th，
运输署{
填充：0px；
}
td:n个孩子（1），td:n个孩子（2）{
边界权：无；
}
td:n个孩子（3），td:n个孩子（2）{
左边界：无；
}
钮扣{
左边距：210像素；
}
1.付款摘要{
字体系列：“Roboto”，
“Helvetica Neue”，
无衬线；
颜色：#008b8b；
}
2017年7月11日
下午3:45
$100
露易丝
$150
乔
$300
克利夫兰
$250
您尝试过伪元素吗？使用：：在之前和：：在之后执行此操作，并移除第二个td的边框。希望这对你有帮助：）
p{
字体系列：Lato；
}
.圆圈{
边框：2px实心#A1A1；
填充：10px 40px；
背景：#dddddd；
宽度：1px；
高度：60px；
边界半径：100px；
变换：比例（0.5,0.5）；
}
.circle：：在{
背景色：#a1a1；
宽度：2倍；
高度：44px；
位置：绝对位置；
左：48%；
内容：“；
顶部：-58%；}
.circle：：在{
背景色：#a1a1；
宽度：2倍；
高度：44px；
位置：绝对位置；
左：48%；
内容：“；
底部：-55%；}
桌子
运输署，
th{
边框：1px实心#ddd；
文本对齐：居中；
}
桌子{
边界塌陷：塌陷；
宽度：100%；
}
th，
运输署{
填充：0px；
}
td:n个孩子（1），td:n个孩子（2）{
边界权：无；
}
td:n个孩子（3），td:n个孩子（2）{
左边界：无；
}
钮扣{
左边距：210像素；
}
1.付款摘要{
字体系列：“Roboto”，
“Helvetica Neue”，
无衬线；
颜色：#008b8b；
}
2017年7月11日
下午3:45
$100
露易丝
$150
乔
$300
克利夫兰
$250
该链接似乎不起作用。我得到致命错误：外部资源加载失败：
hi@user184994，我创建了另一个链接。你能告诉我这个链接是否有效吗？是的，我忘记添加css了。新链接：不要链接到你的代码，向我们展示你的代码：在你的问题中包括演示/再现你的问题所需的代码（目前有三张投票关闭你的问题，因为没有代码，其中一张是我的）。该链接似乎不起作用。我得到致命错误：外部资源加载失败：
hi@user184994，我创建了另一个链接。你能告诉我这个链接是否有效吗？是的，我忘记添加css了。新链接：不要链接到您的代码，向我们展示您的代码：在您的问题中包括演示/再现您的问题所需的代码（目前有三张投票关闭您的问题，因为没有代码，其中一张是我的）。