表格中的垂直线嵌套/隔行组

Question

我有以下要求在表格中的组之间绘制线条（其中组可以嵌套和隔行扫描）。我想知道是否有人有任何简单/聪明的方法可以做到这一点？

我目前最好的想法是每一行都保持其所属组的状态以及该组的缩进程度。然后在渲染时我渲染了#s;＆＃34;浮动＆＃34;左，提供必要的缩进和必要的线条样式。尽管我认为这会“工作”，但我还是想知道是否有更好的方法。

Answer 1

如果你想要制作那条垂直线，我会在表格单元格中使用带有内联块和边框的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 -->

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

<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中使用一些编程魔法来确定何时需要边框。

请注意，您将需要不间断的空格（＆amp; nbsp），否则div将折叠为0像素元素，并且不会显示任何边框。您可能还必须设置div高度，以使边框看起来像一条连续线。表格单元格（td＆＃39; s）和表格行（tr＆＃39; s）应该没有填充或边距。如果文本需要填充或边距，则在文本div中设置它。