列中的子行與表中的其他行對齊？

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與「酒吧」對齊）

我能想到的唯一解決方案是使用帶左填充的<td>，以便將內容移到右側（並以編程方式生成金額的填充）。不過，這感覺就像是黑客。我希望能有更多的pure-css/html解決方案，但不知道如何去做。

Answer 1

我會用在每個孩子單獨clases添加自定義的利潤率左，而其餘元素應保持在相同的位置：

td { 
 
    min-width: 50px; 
 
} 
 

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

 
.child1 { 
 
    margin-left: 5px; 
 
} 
 

 
.child2 { 
 
    margin-left: 10px; 
 
} 
 

 
.child3 { 
 
    margin-left: 15px; 
 
}

<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>