如何用CSS将嵌套UL结构转为无缩进表格布局（不可改HTML）

问题背景 #

现有如下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结构；保留表格布局的列对齐规整性（部分列文本较多，Flex布局不适用）。

解决方案 #

调整CSS，让嵌套的<ul>融入主表格结构，而非作为独立表格：

/* 根ul作为主表格，清除默认边距 */
ul {
    display: table;
    width: 100%;
    margin: 0;
    padding: 0;
    border-collapse: collapse; /* 可选：合并单元格边框 */
}

/* 所有li统一作为表格行，移除默认列表标记 */
li {
    display: table-row;
    list-style: none;
}

/* 所有div作为表格单元格，添加内边距优化显示 */
li div {
    display: table-cell;
    padding: 8px;
    border: 1px solid #eee; /* 可选：添加边框区分行列 */
}

/* 关键：将嵌套ul转为表格行组，消除独立表格带来的缩进 */
li ul {
    display: table-row-group;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* 确保嵌套li的行结构与父级一致 */
li ul li {
    display: table-row;
}

原理说明 #

• 把嵌套的<ul>设置为table-row-group，使其成为主表格的一部分，子级<li>会直接作为主表格的行，不再产生嵌套缩进。
• 清除所有列表的默认边距和标记，避免额外的缩进空间。
• 可选的边框和内边距设置，能提升表格的可读性和视觉效果。

内容的提问来源于stack exchange，提问作者Ricky Bailey