Jquery 使用CSS替换旧页面中的嵌套表

我试图更新一些旧代码来替换旧页面中的一堆嵌套表。该页面动态生成“环境”列表，对于每个环境，该表包含一个嵌套表，列出该环境中的每个“项目”。我在用CSS重写它时遇到了一些大麻烦（我主要是一个后端开发人员）。现有表需要每个嵌套表都是可折叠的，因此您可以从只查看每个嵌套表的标题开始，然后通过单击稍微加上img来展开以查看正文。我知道这需要用多个列表来完成，我可以用一个表来完成，但是嵌套的表让我很痛苦。我更喜欢使用jquery进行折叠和排序

下面是表格外观的一些html示例。请记住，这些都是动态生成的，嵌套表需要是可折叠的。整个表应该是可排序的

<table id='env' class='sortable-onload'>
  <thead>
     <tr>
      <th class='sortable'>Environment</th>
      <th class='sortable'>Description</th>
      <th class='sortable'>Status</th>
      <th class='sortable'>Items</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td><b>Dynamic link to environment details</b></td>
        <td>Dynamic Description</td>
        <td>Dynamic Status</td>
        <td>
            <table> 
                <thead>
                <th>
                    <td>Individual Items</td>
                    <td>Description</td>
                </th>
                </thead> //everything under this header should be collapsible 
                <tr>
                    <td id='item_id'>dynamic item name</td>
                    <td></td>
                </tr>
                <tr>
                    <td id='item_id'>dynamic item name</td>
                    <td></td>
                </tr>
                <tr>
                    <td id='item_id'>dynamic item name</td>
                    <td></td>
                </tr>
            </table>
    </tr>
    <tr>
        <td><b>Dynamic link to environment details</b></td>
        <td>Dynamic Description</td>
        <td>Dynamic Status</td>
        <td>
            <table>
                <thead>
                <th>
                    <td>Individual Items</td>
                    <td>Description</td>
                </th>
                </thead> //everything under this header should be collapsible 
                <tr>
                    <td id='item_id'>dynamic item name</td>
                    <td></td>
                </tr>
                <tr>
                    <td id='item_id'>dynamic item name</td>
                    <td></td>
                </tr>
                <tr>
                    <td id='item_id'>dynamic item name</td>
                    <td></td>
                </tr>
            </table>
    </tr>
    </tbody>
</table>

环境
描述
地位
项目
动态链接到环境详细信息
动态描述
动态状态
单项
描述
//此标题下的所有内容都应可折叠
动态项目名称
动态项目名称
动态项目名称
动态链接到环境详细信息
动态描述
动态状态
单项
描述
//此标题下的所有内容都应可折叠
动态项目名称
动态项目名称
动态项目名称

这篇文章描述了您的总体目标，而不是关于代码错误或功能的具体问题。您是否会更新它，使其包含一个特定的问题，使其能够得到一个简洁的答案？这看起来像表格数据，使用表格没有什么错。