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 the ss:

here you can see that the table with data overlaps my footer(starting with the "NOTE:")

here is my code for the footer:

     <div class="divFooter" style="display:block;position:absolute;width:100%;bottom:0px;">
      <div class="row" style="font-size:12px;"><div class="col-md-12">
        <div style="width:100%;height:20px;border-top:1px solid #E8E8E8;border-bottom:1px solid #E8E8E8;background:color:"><p style="margin-left:10px;">NOTE:</p> </div>
            <div style="height:100%;width:50%;border-right:1px solid #E8E8E8;float:left;">

sample fiddle https://jsfiddle.net/h6y4srez/

回答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?

回答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.

来源：https://stackoverflow.com/questions/38581726/data-table-overlaps-footer-when-printing