jQuery / CSS: How to add page breaks dynamically

Question

I have an HTML page that contains a form large table where a user can delete, move and add rows dynamically.

When printing the form there should not be more than 25 rows on a page to prevent the font size from getting too small and to avoid other layout issues. I was therefore looking for something to add a page break dynamically after every 25 rows.

The only thing I came across on the CSS side is the page-break-after style which could then perhaps be used with dynamically added divs (like <div class="page-break"></div>) but I am not sure about the right approach here.

On the jQuery side the following should give me the current number of rows in my table:

$(this).closest('table').find('tbody > tr').length

Also, I wouldn't actually need to create a real new page but just want to re-add the table's head so that every printed page starts with the same thead and then contains a maximum of 25 rows.

Can someone help me with sharing a link or example for something like this or can you let me know if this is not possible at all ?

Many thanks in advance, Mike

Answer 1

Are you using the THEAD and TFOOT tag? That's exactly what these tags are for :)

Documentation:

Table rows may be grouped into a head, foot, and body sections, (via the THEAD, TFOOT and TBODY elements, respectively). Row groups convey additional structural information and may be rendered by user agents in ways that emphasize this structure. User agents may exploit the head/body/foot division to support scrolling of body sections independently of the head and foot sections. When long tables are printed, the head and foot information may be repeated on each page that contains table data.

Answer 2

Some browsers allow this by default using the thead tag, but if you want a solution for all browsers, then you can enforce the style:

thead {
    display: table-header-group;
}

Obviously you need to be using a thead to go with that though.