Data table overlaps footer when printing

大兔子大兔子 提交于 2020-03-27 02:56:28

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!