The table has and tags as the content that is generated depends on the number of items inside the order.
However, when the PDF is printed, the content of the table overflows and the information about an item is split between 2 sheets, which does not look good.
When applying a page-break-inside: avoid; and display: table-row; to a div, every first generated content inside the table on a new page is spread out. The rest of the generated content appears just fine.
As you can see, the first part that is generated onto the PDF has its details spread out, unlike the others that follow. This only happens for each first part of each page.
I tried everything I could find on here and on the internet, but made no progress. Can't figure out why only the 1st item of each new page appears spread out, and the rest are ok. Please help!