page break a specific portion of the page

Question

I am trying to take a specific portion of the page to the next page keeping the rest of the page elements after that potion on the first page, let me explain it with a figure

i want to take the tr with class=nextpage to the next page and keep the rest of the page as it is so that the final print would look like

is it possible to achieve? or do i have to consider some other options like iText sharp (though i dont know how would i use it too).. please help me find a way

Answer 1

So normally you would write the following CSS to get the element on the next page and be done:

.nextPage {
  page-break-before: always;
}

But this only works for block elements. You could add display:block to your CSS class, but that would change the formatting of the table row. Maybe the best thing to do is to wrap the contents of the first cell in the table row in a div, which is a block element:

<table>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td><div class="nextPage"></div></td><td></td>
  </tr>
</table>