Hi -- we have created TRs with three rows each, such that each TR holds three rows of data. We do not want a page break within the TR, such that those three rows are ever split up. I attached an example below.


However -- we are having unwanted additional page breaks being inserted randomly.

Here is the CSS at the moment:

table.spirits {
border: 1px solid blue !important;
page-break-inside: avoid !important;
break-inside: avoid-page !important;

}

table.spirits > tr > td {
page-break-inside: avoid !important;
break-inside: avoid-page !important;
border: 1px solid red !important;
}

tr.page-break-avoid {
page-break-inside: avoid !important;
break-inside: avoid-page !important;
border: 1px solid red !important;
}

1. SAMPLE-51.pdf‎ 976.2 kB ‎
   EXAMPLE OF PAGE BREAKS

Edited 16 Sep 2018 by zackingit

I will also add we have tried combinations of each of those CSS snippets, not just one of them, at a time.

These snippets were placed inside the @media print bracket, as well as outside of it. (tried both)

Edited 16 Sep 2018 by zackingit

Here's the current CSS/HTML:

497-511 has the relevant CSS in style.css, and
115-190 has the relevant HTML

1. combo_template.liquid‎ 17.5 kB
2. style.css‎ 9.0 kB

If you don't want the row/cell content to break but you are okay with breaks between rows, then specifying page-break-inside: avoid on the rows and cells but not the table should work.

Just wanted to update on what worked for future users:

Add class 'page-break-avoid' (or whatever) to every tr and td. Then, the following cs for the selected elements:

tr.page-break-avoid {
page-break-inside: avoid !important;
border: 1px solid red;
page-break-before: avoid !important;
}

td.page-break-avoid {
page-break-inside: avoid !important;
border: 1px solid blue;
page-break-before: avoid;
}


for some reason, adding `page-break-before: avoid` but not `page-break-after: avoid` seemed to do the trick.

Edited 17 Sep 2018 by zackingit