I am trying to add a page break in a table, but it’s not working. Let me explain the situation. I have an HTML table with big data with around 40 rows. I want to print the table. In the print screen, I added a background image like a pad. The rows automatically go to the next page, but it overrides my footer background. I want the page to break a little earlier. How do I add a page break in the desired row?
I tried this line of CSS in tag but had no luck.
{ page-break-after: always; }
{ page-break-after: always; }
This line of CSS only works on block-level elements. It will not work on elements that have float or position: absolute property.
So table rows mean is not a block-level element, so page break will not work on . You can try adding a display block to all tags. I am not sure if it will work or not.
Another solution could be adding JavaScript and creating a custom page break. Suppose you want to keep 20 rows on one page and the rest on a different page. Clone the extra 20 rows and remove them from the table, then create a page break outside the table. Now create a table with the cloned rows, which may look what you expect.