Data Table Overlaps Footer When Printing

So my table with a lot of data overlaps my footer on my print page, how do i make when the data is about to reach the footer the remaining data will go to the second page, here is

Solution 1:

Quick question regarding this table.

The footer you have coded. It seems to be entirely related in subject to that of the main body of the table. Is this correct?

If so, can you simply not put the end part within a <tfoot> tag, thus joining it to the table proper and preventing it from running over any other content?

Solution 2:

In your CSS:

thead, tfoot { display: table-row-group }

This makes them render as normal rows, without attempting to repeat them when there is a page break.