How to avoid cut element while html print (avoid showing in two pages)

Question

I have an HTML report contain many small tables that never will be bigger than an A4 page.

What I need that if one of those tables is showing in two pages to be pushed to the next page.

See the image of an example of a table needed to be shown on the next page.

Answer 1

Below trick should solve your issue (assuming your rows are divs).

You can add this rule to your CSS.

@media print  
{
    div {
        page-break-inside: avoid;
    }
}