Flying saucer detect page break?

Question

I have a productGroups List, inside each product group I have a list of product . I want to loop every item in productGroups and all product inside each productGroup .

So I have created a table to display all product inside each product group and I put product group name on top of each table so user can know product belong which product group.

The problem is. if product list to long and break to a new page. I want to put product group name( <p class="product-group">[[${productGroup.getPgNumber()}]] - [[${productGroup.getPgName()}]]</p> ) in that new page.

How can I do it?

    <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>

Answer 1

你可以使用这个 CSS 来表明你不希望分页进入你的 div：

    div{page-break-inside:avoid}