Javascript 跨嵌套的子div复制表列结构

因此，我正在使用一段代码，该代码基于数据结构自动生成嵌套的复选框结构

下面，我对嵌套的div结构进行了简化：

<div class="tree">
    <div class="item level1">
        <div class="content">
        </div>
        <div class="children>
            <div class="item level2">
                <div class="content">
                </div>
                <div class="children>
                    <div class="item level3">
                        <div class="content">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

因此，我希望向那些

level3

节点添加数据片段，但我希望这些数据片段以类似于表的方式格式化

这是一张基本图：

注意：绘制线条只是为了便于查看格式，不需要在实际视图中

我希望所有值1的值都能像列一样排列，这样每个“单元格”都有列中最长div的长度，这样它们可以轻松格式化，用户可以向下扫描列表

在

level3

节点的

content

div中放置这些数据片段的最佳方法是什么，同时正确格式化它们？我曾想过尝试用某个类计算每个

div

的适当宽度，并用JavaScript手动设置宽度，但我不确定如何获取“适当”宽度，以便调整所有

div

。这也很重要，因为我们可以更改值。因此，如果一个值改变，我将不得不重新计算宽度

---

提前谢谢

我不确定我是否理解计算宽度的方法，为什么？有没有理由不使用嵌套的

元素呢？因此，
元素之所以不被使用，仅仅是因为它是由原始开发人员格式化的。我可以尝试更新它以使用
和
• （或者只更新css以使用列表显示属性），但是嵌套UI已经可以正常工作了。至于计算宽度，我想在嵌套的树/检查表中创建一个伪表结构，以便与level3节点关联的值可以像表一样轻松地上下读取。所以，我认为手动设置每一段“数据”的宽度可以做到这一点，但如果可能的话，我更喜欢更干净的CSS解决方案。