Break table which inside table but keeping rows untouch

Question

I have the following HTML> jsfiddle.
When I output it to PDF using DOMPDF, on the first page I got the 2 first rows, than I got 10 empty pages and than 2 pages with the rest of the content.

How can I break the table so it will spread on the correct number of pages?
I tried to use page-break-inside: avoid; on the main table, but It ruined the broken row.

I want it to break like you expect it to break but I have no idea how...

Any help would be appreciated.
Thanks!

Answer 1

The rendering issue is due to a known bug related to a single entity that is too large to fit on a page. In your case, your product list table (which is larger than a page) is contained within another table, which creates a table cell too large to fit on a page. See the dompdf tracker, issue 91: dompdf unable to split table cells between pages.

Luckily, your layout is such that the work around is fairly simple. Move the product list table outside the container. I updated your original jsfiddle.