Missing table border bottom

This is my problem:
I’m create a report at JSReport and I’m use #each from handlebars to generate data in my table, but, when break page the border-bottom is missing, showing only at the end of the table.

Follow images:
enter image description here

enter image description here

I need that in both situations they show the lower border at the end, as in this situation below which indicates that the table is finished.

enter image description here

Follow the HTML and CSS of the table.

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>

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

.contentInfo td,
.contentInfo th {
    vertical-align: top;
    border: 1px solid #000;
    padding: 0 5px;
    height: 40px;
}
body .tabelaProdutos {
    border: 1px solid #000 !important;
}

body .tabelaProdutos thead th {
    font-size: 10px;
    height: 20px !important;
    line-height: 20px;
}

body .tabelaProdutos tbody td {
    border: none !important;
    border-right: 1px solid #000 !important;
    border-left: 1px solid #000 !important;
    font-size: 12px;
    line-height: 15px;
}

/* This style i'm use to break page and agroup the content togheter */
tr {
    page-break-inside: avoid !important;
}

I need the border-bottom to appear solely at the end of the table and not dividing each line

Thanks for help!

  • As posted I took your table and made multiple TR from that – it shows, using your CSS the bottom border. I created an answer just to test this but deleted it due to that

    – 




Add the following rule which adds a bottom border to the cells in the last row:

body .tabelaProdutos tbody tr:last-child td {
    border-bottom: 1px solid #000 !important;
}

Leave a Comment