CSS打印预览页面被剪切

Question

As you can see in this Image , The title of the next table is being cut when the first table is having more records, sometimes the table before page break is long sometimes its short.

How can i make a dynamic margin adjustment at the bottom? To avoid those unwanted cutoffs?

    @page {
      margin-top: 13mm;
      margin-left: 1px;
      margin-right: 1px;
      size: short;
    }
    @media print {
      html, body {
        width: 250mm;
        height: 297mm;
      }
      /* ... the rest of the rules ... */
    }   

Answer 1

according to your images, I guess you can try page-break-before or page-break-after

@media print {
    h1 {
        page-break-before: auto | always | avoid | left | right | inherit;
        page-break-after:  auto | always | avoid | left | right | inherit;
    }
}

And two articles might explain these two CSS properties, click here and click here

if you can provide some code or example on fiddler will be awesome for others to help you