如何在HTML表中显示树？
我试图在HTML表中显示一个树结构。这基本上是一个你提到一个网站的人的列表，但你可以展开每个人，也可以看到他们提到的人(只有2到3个级别)。我还显示了每个人的一些信息，所以我使用了一个包含多个列的表。
我想知道什么是最好的方式来显示它，让较低级别的人看起来“缩进”，但避免数据内容和显示每个数字含义的标题之间的不匹配……
我主要在这里寻找偷窃的想法:-)你见过或做过这样的网站吗？
编辑：感谢您到目前为止的所有答案。
我想我没有正确地解释我想要做的事情。这是一个人员列表，但此报告存在的原因是附加到每个人的数字，而不是列表本身。
对于这个“列表”中的每个人，我将在他们的右侧显示数据，这些数据需要对齐，例如，在底部有“总数”，等等。
图，如果你愿意，有Windows资源管理器，树在左边，所以你可以打开和关闭文件夹，但是，然后，在每个文件夹的右边，你有像有多少个文件在那里，什么样的信息，等等.就像你在Windows资源管理器的右窗格中的“文件”(在详细信息视图中)，只是我为左边的树做了。(这不是我正在做的，但这是我能想到的最接近的类比)
这就是为什么我倾向于做一个表格而不是一个列表。如果这些只是人名，或者是文件夹的树，我完全同意嵌套是可行的，在这种情况下，我的问题是，我需要为每个项目显示的额外数据是整个报告中最重要的部分。
回答 9
Stack Overflow用户
发布于 2009-06-03 15:47:50
对列表使用语义上合适的标记：<ul>。只需对它们进行嵌套。您可以隐藏结构的一部分，也可以动态创建它。
<ul id='n0>
<li id='n1'>One guy</li>
<li id='n2'>Second guy
<ul id='n2.0'>
<li id='n2.1'>first one of second guy</li>
<li id='n2.2'>last of second</li>
</ul>
</li>
<li id='n3'>Third one</li>
</ul>诸若此类。项目的命名由您决定，我通常不是反映结构(如这里)，就是数据库it。
Stack Overflow用户
发布于 2012-09-03 15:40:11
此类布局的名称为：
- 树网格/树网格(例如:Ajax)
- 树列表视图/树列表视图(例如:微软.Net)
- 树模型/树模型(例如: Qt框架)
搜索"treegrid“和"tree grid html5”似乎给出了最好的html实现结果。
Stack Overflow用户
发布于 2009-06-03 18:02:23
我们使用一组DIVs来显示相似的结构。奇数(第一位、第三位、第五位等)每个表里面都有一个单行表，甚至是1(2，4，等等)最初的CSS设置为“display:none”。每个表的第一个单元格包含一个链接，该链接触发它下面的DIV填充通过AJAX调用从服务器返回的数据。返回的数据可以具有与第一级内容相同的结构(许多“可扩展”行)，或者只是有关相关记录的“详细信息”。它没有任何语义上的东西，但它看起来像客户想要的那样，而且它是有效的。截图如下：
扩容前的初始列表：alt text http://img26.imageshack.us/img26/5986/28656041.png
点击最后一个链接(70036720)后：alt text http://img15.imageshack.us/img15/7455/40596280.png
点击第二层(70036720-1)中的链接后：alt text http://img197.imageshack.us/img197/4588/37964248.png
https://stackoverflow.com/questions/945460
复制相似问题