html - 使用 div 布局的嵌套表格

Question

我有一个类似这样的 HTML 结构:

<ul>
   <li>
      <div></div>
      <div></div>
      <div></div>
      <ul>
         <li>
            <div></div>
            <div></div>
            <div></div>
         </li>
      </ul>
   </li>
   <li>
      <div></div>
      <div></div>
      <div></div>
      <ul>
         <li>
            <div></div>
            <div></div>
            <div></div>
         </li>
      </ul>
   </li>
   <li>
      <div></div>
      <div></div>
      <div></div>
      <ul>
         <li>
            <div></div>
            <div></div>
            <div></div>
         </li>
      </ul>
   </li>
</ul>

我正在使用以下 CSS 将其格式化为表格:

ul {
    display: table;
    width:100%;
}
li {
    display: table-row;
}
li div {
    display: table-cell;
}

但是，我需要所有行(父行和子行)全部对齐到左侧，一个在另一个下方，没有“嵌套”或“缩进”布局。这在当前的 HTML 中可行吗？ (注意，我无法更改 HTML 结构)使用“表格”布局的原因是所有列的间距都很好。我也许可以使用 Flex，但有些列的文本比其他列多得多，因此表格格式似乎效果最好。

感谢任何帮助!

https://jsfiddle.net/randkb/os7eq493/3/

我想要的结果是这样的:

而不是这个:

Answer 1

Click on below link, it have your defined outcome.

Click here