我正在尝试在 HTML 表中显示树结构。它基本上是您提到某个网站的人员列表,但您可以展开每个人员并查看他们也提到的人员(仅 2 或 3 级)。
我还显示了每个人的许多信息,因此我使用了一个包含几列的表格。
我想知道显示此内容的最佳方式是什么,以便较低级别的人员看起来“缩进”,但又避免数据内容和显示每个数字含义的标题之间不匹配......
我主要是在这里寻找窃取想法:-) 你曾经见过或做过一个有类似内容的网站吗?
Edit:感谢您迄今为止的所有回答。
我认为我未能正确解释我想要做什么。
这是一份人员名单,但这份报告存在的原因是每个人所附的数字,而不是名单本身。
对于这个“列表”中的每个人,我将在他们的右侧显示需要对齐的数据,例如,在底部有“总计”等。
想象一下,如果您愿意的话,使用 Windows 资源管理器,左侧有树,这样您就可以打开和关闭文件夹,但是,在每个文件夹的右侧,您可以看到数据,例如其中有多少文件,什么样的信息等。就像您在 Windows 资源管理器的右侧窗格中获取“文件”(在“详细信息”视图中)一样,只是我对左侧的树执行了此操作。
(这不是我正在做的,但这是我能想到的最接近的类比)
这就是为什么我倾向于制作表格而不是列表。
如果这些只是人名或文件夹树,我完全同意嵌套
是可行的方法。在这种情况下,我的问题是我需要为每个项目显示的额外数据是整个报告中最重要的部分。
对列表使用语义上适当的标签:<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>
等等。项目的命名由您决定,我通常会反映结构(如此处)或数据库 ID。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)