I’m stuck with this problem. I used many solution but still not solved. I have a form with table data, but the table has row merge with many “<td></td>”.

I want to page break <td></td> but it’s not working with row merge.

here’s the code

@media print {
    a[href]:after {
        content: none !important;
        display: none !important;
    }

    img[src]:after { 
        content: none !important; 
        display: : none !important; 
    }
    
    .custom-bg-teal {
        background-color: #eec547 !important;
    }

    table { page-break-inside:auto }
    tr    { page-break-inside:avoid; page-break-after:auto }
    thead { display:table-header-group }
    tfoot { display:table-footer-group }
}

Please see image for actual error.

Thank you.

I’m expecting Like this. please see image.

I used this code below but it only shows that page 1.

@media print {
    a[href]:after {
        content: none !important;
        display: none !important;
    }

    img[src]:after { 
        content: none !important; 
        display: none !important; 
    }
    
    .custom-bg-teal {
        background-color: #eec547 !important;
    }

    table { page-break-inside:auto }
    tr    { page-break-inside:avoid; page-break-after:auto }
    thead { display:table-header-group }
    tfoot { display:table-footer-group }

    html, body {
        height:100vh; 
        margin: 0 !important; 
        padding: 0 !important;
        overflow: hidden;
    }
}