html - 表格内的垂直线嵌套/交错组

Question

我有以下要求在表格内的组之间画线(组可以嵌套和交错)。我想知道是否有人有任何简单/聪明的方法可以做到这一点？

我目前最好的想法是每一行都保持其所属的组的状态以及该组的缩进程度。然后在渲染时我渲染“ float ”的 div/spans，提供必要的缩进和如果需要的线条样式。尽管我认为这会“有效”，但我想知道是否有更好的方法。

Answer 1

如果你想制作垂直线，我会在表格单元格中使用带有内联 block 和边框的 div。

<td>
    <div style="display: inline-block; border-left: 1px solid #000;">
        &nbsp;
    </div>
    <div style="display: inline-block; padding-left: 10px;">
        Test Group1
    </div>
</td>
<!-- ...ect -->

然后在组的最后一行，该 div 上还有一个底部边框。

<td>
    <div style="display: inline-block; border-left: 1px solid #000; border-bottom: 1px solid #000;">
        &nbsp;
    </div>
    <div style="display: inline-block; padding-left: 30px;">
        Test Group3
    </div>
</td>

显然，如果您需要它自动发生，您需要在 PHP 和/或 Javascript 中使用一些编程魔法来确定何时需要边框。

请注意，您将需要不间断空格 ( )，否则 div 将折叠为 0 像素元素并且没有边框可见。您可能还必须设置 div 高度，使边框看起来像一条连续线。表格单元格 (td's) 和表格行 (tr's) 不应有填充或边距。如果文本需要填充或边距，请在文本 div 中设置。