JQuery / CSS: how to dynamically add page breaks

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

When printing a form, there should be no more than 25 lines on a page to prevent font size being too small and to avoid other layout issues. So I was looking for something to add a dynamic page break every 25 lines.

The only thing I came across on the CSS side is the styling page-break-after

that could then be used with dynamically added divs (for example <div class="page-break"></div>

), but I'm not sure if it fits right here.

On the jQuery side, the following should indicate the current number of rows in my table:

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

      

Also, I really wouldn't need to create a real new page, but just want to add the table header again so that each printed page starts in the same hell and then has a maximum of 25 lines.

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

Thanks a lot in advance, Mike

+3


source to share


2 answers


Are you using the THEAD and TFOOT tag? These are the tags that are meant for :)

Documentation :



Table rows can be grouped into head, leg, and body sections (via THEAD, TFOOT, and TBODY elements, respectively). Row groups convey additional structural information and can be displayed by user agents in ways that emphasize this structure. User agents can use the head / body / foot subdivision to support scrolling of body parts independent of head and leg sections. When long tables are printed, the head and leg information may be repeated on each page containing the table data.

+3


source


Some browsers allow this by default with a tag thead

, but if you want a solution for all browsers you can style:

thead {
    display: table-header-group;
}

      



Obviously you need to use thead

for this.

+3


source







All Articles