I have this html/JS code that generates N tables based on user input. I'm trying to separate the content in pages of "A4" size and with no more that 6 tables within each page in order to give the option to print as PDF.
I'm using the built-in JS function window.print(). The issue is that when the browser opens up the printing preview window, only detects 2 pages and only first page content appears correct, the rest appears empty.
You can try for example to generate 24 tables (that would be 4 pages) and when click on print, only 2 pages are detected.
Basically I'm using this to convert as PDF the content generated by the other 2 JS codes.
<button onclick="printPDF()">Print PDF</button>

    function printPDF() {
        window.print();
    }

How to fix this, in order to print all pages? Thanks

How to print as PDF all pages in HTML?
One problem is the hidden page overspill
so simply remove that such that all contents are eligible for printing. Note you may want to move hidden to just the button at print time.
And the 2nd is you may need a page-break-after: always;
when the table container blocks reach 6 to a page limit, so try add that in. Note even with all 6 it will not add a blank page unless the table is too close to the edge so it overspills, hence the 7th (13th ... etc.) triggers the page break.
Later Edit I seems that an auto page-break is added in the fiddle so may not be needed? However I also had issues with FireFox assessment of page height so for my MS printing had to reduce between 3-6mm to not trigger an extra page!

https://jsfiddle.net/61qshzvc/
