我有一个productGroupList，在每个产品组中，我有一个产品的列表。我想循环productGroup中的每个项目以及每个productGroup中的所有产品。

因此，我创建了一个表来显示每个产品组内的所有产品，并将产品组名称放在每个表的顶部，以便用户可以知道产品属于哪个产品组。

问题是。如果产品列表变长并中断到新页面。我想把产品组名称（

我该怎么做呢？

    <div th:each="productGroup: ${productGroups}">
            <p class="product-group">[[${productGroup.getPgNumber()}]] - [[${productGroup.getPgName()}]]</p>
            <table >
                <thead>
                <tr>
                    <th>BRAND</th>
                    <th>MODEL</th>
                    <th>FEATURE TEXT</th>
                    <th>M.P.</th>
                    <th>ARTICLE</th>
                    <th>PRO</th>
                    <th>SAL</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="audit: ${productGroup.getAudits()}">
                    <td width="10%" th:text="${audit.getBranch()}"></td>
                    <td width="10%" th:text="${audit.getModel()}"></td>
                    <td width="40%" th:text="${audit.getFeatureText()}"></td>
                    <td width="10%" th:text="${audit.getMultiPack()}"></td>
                    <td width="10%" th:text="${audit.getArticleNumber()}"></td>
                    <td width="10%" th:text="${audit.getPro()}"></td>
                    <td width="10%" th:text="${audit.getSal()}"></td>
                </tr>
                </tbody>
            </table>
        </div>