我正在尝试在圆之间绘制线条，我有这段代码https://codepen.io/cfmorales/pen/qBEqGpr，它在某种程度上可以工作，但是当您调整页面大小时，线条的高度与圆不匹配，关于如何可以我让它响应？所有的魔力都在：before
td:nth-child(2) {
vertical-align: baseline;
}
td:nth-child(1) {
display: flex;
justify-content: center;
margin-right: 28px;
width: 42px;
height: 42px;
border: 1px solid #999999;
border-radius: 100%;
text-align: center;
margin-bottom: 31%;
position: relative;
}
tr > td:first-child:before {
content: '';
position: absolute;
background: #BFBFBF;
height: 26px;
width: 1px;
top: 100%;
left: 50%;
transform: translateX(-50%);
}
tr:last-child > td:first-child:before {
display: none;
}
span {
vertical-align: middle;
color: #999999;
font-family: "Playfair Display";
font-size: 24px;
line-height: 32px;
text-align: center;
}<table class="table_1">
<tbody>
<tr>
<td><span>1</span></td>
<td><span>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal m</span></td>
</tr>
<tr>
<td><span>2</span></td>
<td><span>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal mLorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal m</span></td>
</tr>
<tr>
<td><span>3</span></td>
<td><span>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal m</span></td>
</tr>
<tr>
<td><span>4</span></td>
<td><span>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal m</span></td>
</tr>
<tr>
<td><span>5</span></td>
<td><span>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal m</span></td>
</tr>
</tbody>
</table>
<p></p>
答案 0 :(得分：0)
更新：
sudo docker exec -u 0 -it --workdir / oracle12se /bin/bash
td:nth-child(2) {
vertical-align: baseline;
}
td:nth-child(1) {
display: flex;
justify-content: center;
margin-right: 28px;
width: 42px;
height: 42px;
border: 1px solid #999999;
border-radius: 100%;
text-align: center;
margin-bottom: 31%;
position: relative;
background: #fff;
}
tr > td:first-child:before {
}
tr:last-child > td:first-child:before {
display: none;
}
span {
vertical-align: middle;
color: #999999;
font-family: "Playfair Display";
font-size: 24px;
line-height: 32px;
text-align: center;
}
.cc{
position: relative;
display: block;
width: 100%;
text-align: left;
}
.cc:after{
content: '';
position: absolute;
background:
#BFBFBF;
height: 100%;
width: 1px;
top: 3px;
left: -55px;
transform: translateX(-50%);
display: block;
z-index: -1;
overflow:hidden;
}
.num{
position: relative;
z-index: 100;
background:#fff;
}
答案 1 :(得分：0)
更好地使用SVG，请检查以下链接
<svg>
<line
x1="50"
y1="100"
x2="500"
y2="100"
style="stroke:rgb(0, 0, 0);stroke-width:2.5"
/><svg>
答案 2 :(得分：0)
因此，我对您的代码进行了一些更改，并在自己的Codepen中对其进行了一些处理。使用表格格式化标记以使线仅到达圆的边缘时，这是一个棘手的问题。相反，我所做的是给圆赋予浅色，并将线一直向下发送到所有圆，但是更改了z索引，使其隐藏在圆的颜色后面。我还在表格本身周围添加了一个包装器div，以防止该行继续向下移动到屏幕底部，因为我将高度从100%更改为90vh。剩下要解决的问题是使行在最后一个圆处停止，而不是继续到最后一个圆的文本的最后一点的底部。无论如何，在我看来，它现在看起来比您最初的示例要好得多。我仍在努力中，但是您可以在这里查看到目前为止我所做的事情：https://codepen.io/stephenirving/pen/Jjobqrb
如果您需要我解释我的任何更改，我将很乐意。
当前的CSS代码在这里：
td:first-child {
align-items: center;
background: #add8e6;
border-radius: 50%;
border: 1px solid #999;
display: flex;
height: 42px;
justify-content: center;
margin-right: 28px;
position: relative;
text-align: center;
width: 42px;
}
tr:not(:last-child) > td:first-child:before {
background: #bfbfbf;
content: "";
height: 90vh;
left: 50%;
position: absolute;
top: 100%;
transform: translateX(-50%);
width: 1px;
z-index: -1;
}
td:last-child {
text-align: justify;
vertical-align: top;
}
tr:not(:last-child) > td:last-child {
padding-bottom: 1em;
}
span {
color: #999;
font: 1.5rem/1.333 "Playfair Display", sans-serif;
text-align: center;
vertical-align: middle;
}
.wrapper--table-list {
margin-top: 1.5em;
overflow: hidden;
width: 95%;
}
答案 3 :(得分：0)
我用div取代了你的桌子。
我在这里做了一些CSS魔术。
这条线只是左边框。
圆圈是::在伪元素之前。
每个:: before元素中都有一个计数器。
我还使用了CSS变量，因此更容易更新几个元素。
我猜想您不希望最后一个元素有一行，所以我使用了：not（：last-child）来阻止这种情况的发生。
:root {
--circle-size: 42px;
--spacing: 28px;
--text-color: #999;
}
.container {
counter-reset: section;
padding-top: var(--spacing);
padding-left: var(--spacing);
}
.container > div {
position: relative;
padding: calc(2 * var(--spacing));
padding-top: 0px;
color: var(--text-color);
font-family: "Playfair Display";
font-size: 24px;
line-height: 32px;
}
.container > div:not(:last-child) {
border-left: 1px solid;
}
.container > div::before {
counter-increment: section;
content: counter(section);
position: absolute;
left: 0px;
top: -4px;
transform: translateX(-50%);
width: var(--circle-size);
height: var(--circle-size);
display: flex;
justify-content: center;
align-items: center;
border: 1px solid var(--text-color);
border-radius: 50%;
background-color: white;
}<div class="container">
<div>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal m</div>
<div>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal mLorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal m</div>
<div>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal m</div>
<div>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal m</div>
<div>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal m</div>
</div>