和假表格格式

【问题标题】：HTML+CSS: combining <UL>/<OL> and faux-tabular formatHTML+CSS：结合 <UL>/<OL> 和假表格格式
【发布时间】：2011-01-29 14:29:02
【问题描述】：

我有一个要以 HTML 格式显示的分层表。 <ul> 和 <ol> 标签适用于事物的分层部分，但我希望总共有 2 或 3 列，其中最左边的列按层次缩进，例如

富
- foo1
- foo2
  - foo2a
- foo3
  - foo3a
  - foo3b
酒吧
- bar1
  - bar1a
  - bar1b
- bar2

但我也希望每个项目在右侧的列上都有一些相应的信息。

如何使用 HTML 和 CSS 做到这一点？

【问题讨论】：

这个“右边的列”会包含什么样的信息？

标签： html css hierarchical tabular

【解决方案1】：

有一张桌子。

但我也希望每个项目在右侧的列上都有一些相应的信息。

这是表格信息。

否则，您可以使用<ol>/<ul> 并将每个元素设置为<dl> (definition list)，以使其看起来像表格的方式设置样式，例如将每个<dd> 浮动到右侧。

<ol>
  <li>
    <dl>
      <dt>element 1</dt>
      <dd>corresponding information 1.1</dd>
      <dd>corresponding information 1.2</dd>
    </dl>
  </li>
  <li>
    <dl>
      <dt>element 2</dt>
      <dd>corresponding information 2.1</dd>
    </dl>
  </li>
<ol>

【讨论】：