列中的子行与表中的其他行对齐？

Question

我想创建一个如下所示的表：

A             | foo  | bla
 A.1          | bar  | bla
  A.1.a       | baz  | bla
   A.1.a. ... | quz  | bla
B             | bfoo | bla
 B.1          | bbar | bla
  B.1.a       | bbaz | bla
   B.1....    | bquz | bla

即，相同深度的“子”行水平对齐（例如，A.1和B.1对齐），并且每行垂直对齐（例如，A.1与“bar”对齐）

我能想到的唯一解决方案是将<td>与左边距填充使用，以便将内容移到右边（并以编程方式生成填充量）。但这感觉就像是黑客。我希望有更多的纯css / html解决方案，但无法弄清楚如何这样做。

Answer 1

我会在每个孩子上使用单个clases来添加自定义margin-left，而其余元素应保持在相同位置：

＆＃13;

＆＃13;

td {
  min-width: 50px;
}

.level {
  display: table;
  padding-right: 50px;
}

.child1 {
  margin-left: 5px;
}

.child2 {
    margin-left: 10px;
}

.child3 {
    margin-left: 15px;
}

＆＃13;

<table>
  <tr>
    <table>
      <tr>
        <td class="level child1">A</td>
        <td>| foo |</td>
        <td>| bla |</td>
      </tr>
      <tr class="">
        <td class="level child2">A.1</td>
        <td>| foo |</td>
        <td>| bla |</td>
      </tr>
      <tr class="">
        <td class="level child3">A.1.a</td>
        <td>| foo |</td>
        <td>| bla |</td>
      </tr>
    </table>
  </tr>
  <tr>
    <table>
      <tr>
        <td class="level child1">B</td>
        <td>| foo |</td>
        <td>| bla |</td>
      </tr>
      <tr class="">
        <td class="level child2">B.1</td>
        <td>| foo |</td>
        <td>| bla |</td>
      </tr>
      <tr class="">
        <td class="level child3">B.1.a</td>
        <td>| foo |</td>
        <td>| bla |</td>
      </tr>
    </table>
  </tr>
  <tr>
    <table>
      <tr>
        <td class="level child1">C</td>
        <td>| foo |</td>
        <td>| bla |</td>
      </tr>
      <tr class="">
        <td class="level child2">C.1</td>
        <td>| foo |</td>
        <td>| bla |</td>
      </tr>
      <tr class="">
        <td class="level child3">C.1.a</td>
        <td>| foo |</td>
        <td>| bla |</td>
      </tr>
    </table>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;