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

【问题标题】：Showing clear relationship in nested html table在嵌套的 html 表中显示清晰的关系
【发布时间】：2021-05-24 23:35:24
【问题描述】：

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

当第二级出现在第三级之后时，就会出现我的问题。很难将它与第一层联系起来，所以它目前看起来像是挂着的。

我尝试在一级表上设置边框以获取表格的高度。这不起作用，因为在第三级是最后一项的情况下，会有一个悬挂边框。

这是这里的完美场景。

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

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

我在stackblitz这里创建了一个演示

我只对 html 和 css 更改持开放态度。

谢谢。

【问题讨论】：

你为什么不能反过来尝试。尝试从根级连接到第一级和第三级。
我实际上已经扭转了它，我有一个几乎完美的解决方案，我很快就会发布。干杯

标签： html css angular sass

【解决方案1】：

通过定位最后的二级行，我们可以覆盖垂直条并为其赋予一个巨大的高度值，如下所示。

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

垂直线可能位于上方的第一行，这可以使用 z-index 和溢出隐藏来修复。这是demo的链接

【讨论】：