显示嵌套html表中的清晰关系

我正在处理一个嵌套表，其中除第一个级别外的每个级别都通过垂直和水平线连接到其父级别，如下所示

.level-two {
    &:last-child {
        td.first {
            div.inner {
                &::after {
                    height: 200px;
                    top: -185px;
                }
            }
        }
    }
}

我的问题发生在第二级出现在第三级之后。很难将它链接到第一层，因此它现在看起来像是挂着的

我试着在第一层桌子上加一个边框来测量桌子的高度。这不起作用，因为在第三级是最后一项的情况下，将有一个悬挂的边界

这是一个完美的场景。

我通过将伪元素的高度增加到像96px这样的高数值来实现这一点，但存在边界溢出

td.first {
   div {      
    &::after {
    content: " ";
    position: absolute;
    width: 2px;
    height: 96px;
    left: -27px;
    background: black;
    top: -33px;
  }
}

我已经在这里创建了一个演示

我只对html和css更改开放

---

谢谢。

通过锁定最后一个level 2行，我们可以覆盖垂直条，并为其提供一个巨大的高度值，如下所示

.level-two {
    &:last-child {
        td.first {
            div.inner {
                &::after {
                    height: 200px;
                    top: -185px;
                }
            }
        }
    }
}

---

垂直线可能位于上面的第一行，这可以使用z索引和溢出隐藏来修复。这里有一个链接，指向

为什么不能反向尝试呢。尝试从根级别连接到第一级和第三级。我实际上已经将其反转，并且我已经得到了一个几乎完美的解决方案，我将很快发布。干杯