JSReport中Handlebars生成表格分页时底部边框缺失问题求助

需求 #

在JSReport中使用Handlebars的#each循环生成报表表格数据，要求：

• 无论表格是否分页，每一页的表格末尾都显示底部边框
• 不要每行之间显示下边框

修改后的CSS代码 #

.contentInfo {
    border-collapse: collapse;
    font-size: 15px;
}

.contentInfo td,
.contentInfo th {
    vertical-align: top;
    padding: 0 5px;
    height: 40px;
}

body .tabelaProdutos {
    /* 只保留表格的左、右、上边框 */
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    border-top: 1px solid #000;
}

body .tabelaProdutos thead th {
    font-size: 10px;
    height: 20px !important;
    line-height: 20px;
    /* 表头底部添加边框分隔 */
    border-bottom: 1px solid #000;
}

body .tabelaProdutos tbody td {
    /* 单元格只保留左右边框，去掉上下边框 */
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    font-size: 12px;
    line-height: 15px;
}

/* 在tbody末尾添加空行，用于显示底部边框 */
body .tabelaProdutos tbody::after {
    content: "";
    display: table-row;
    border-bottom: 1px solid #000;
    height: 0; /* 空行不占用高度 */
}

/* 避免行被分页拆分 */
tr {
    page-break-inside: avoid !important;
}

修改说明 #

1. 调整表格整体边框：移除原有的完整边框，只保留左、右、上边框，避免分页时重复渲染整体边框
2. 表头边框优化：给表头的th添加底部边框，区分表头和内容区域
3. 单元格边框调整：只保留单元格的左右边框，去掉上下边框，实现无行间距边框的效果
4. 分页底部边框处理：通过tbody::after伪元素添加一个空的表格行，设置其底部边框。这个空行会跟随tbody出现在每一页的末尾，确保分页时每页都有底部边框
5. 保留行完整性：继续使用page-break-inside: avoid避免表格行被分页拆分

原HTML代码（无需修改） #

<h1 class="font-weight-bold mt-3">DADOS DO PRODUTO/SERVIÇO</h1>
<table class="contentInfo contentInfosGerais tabelaProdutos" >
    <thead>
        <tr>
            <th scope="col cabecalhoTabela">CÓD. PRODUTO</th>
            <th scope="col cabecalhoTabela">DESCRIÇÃO DO PRODUTO/SERVIÇO</th>
            <th scope="col cabecalhoTabela">NCM/SH</th>
            <th scope="col cabecalhoTabela">CST</th>
            <th scope="col cabecalhoTabela">CFOP</th>
            <th scope="col cabecalhoTabela">UNID.</th>
            <th scope="col cabecalhoTabela">QUANTIDADE</th>
            <th scope="col cabecalhoTabela">VALOR UNITÁRIO</th>
            <th scope="col cabecalhoTabela">VALOR TOTAL</th>
            <th scope="col cabecalhoTabela">BC ICMS</th>
            <th scope="col cabecalhoTabela">VALOR ICMS</th>
            <th scope="col cabecalhoTabela">VALOR IPI</th>
            <th scope="col cabecalhoTabela">ALIQ. ICMS</th>
            <th scope="col cabecalhoTabela">ALIQ. IPI</th>
        </tr>
    </thead>
    <tbody>
        {{#each (populaTabelaProdutos NewDataSet.nfeProc.[0].NFe.[0].infNFe.[0].det)}}
            <tr class="table-content text-justify">
                <td class="produtos table-content-infos">
                    {{codProd}}
                </td>
                <td class="produtos table-content-infos">
                    {{xProd}}
                </td>
                <td class="produtos table-content-infos">
                    {{ncm}}
                </td>
                <td class="produtos table-content-infos">
                    {{cst}}
                </td>
                <td class="produtos table-content-infos">
                    {{cfop}}
                </td>
                <td class="produtos table-content-infos">
                    {{uCom}}
                </td>
                <td class="produtos table-content-infos">
                    {{valor qCom}}
                </td>
                <td class="produtos table-content-infos">
                    {{valor vUnCom}}
                </td>
                <td class="produtos table-content-infos">
                    {{valor vProd}}
                </td>
                <td class="produtos table-content-infos">
                    {{bcIcms}}
                </td>
                <td class="produtos table-content-infos">
                    {{vlrIcms}}
                </td>
                <td class="produtos table-content-infos">
                    {{vlrIpi}}
                </td>
                <td class="produtos table-content-infos">
                    {{aliqIcms}}
                </td>
                <td class="produtos table-content-infos">
                    {{valor aliqIpi}}
                </td>
            </tr>
        {{/each}}
    </tbody>
</table>

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