PrintJS : With repeatable header and footer, tbody content overlaps with header and footer in chrome but not on firefox

[medhi2006]

I am trying to use printJS to print a report using the content inside an html div and it is required to have repeating headers and footers on each page of the report. I used the solution I found in this _https://medium.com/@Idan_Co/the-ultimate-print-html-template-with-header-footer-568f415f6d2a_ to generate the repeating headers and footers. However, the problem is that the content inside the tbody element overlaps with the content in the footer and header on chrome but not on firefox. The html code for the report is as something like this:

<div class="d-none font-weight-bold" id="printable_report">
    <table>
        <thead>
            <tr>
                <th class="text-center"><div class="header-space">&nbsp;</div></th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td class="text-center"><div class="footer-space">&nbsp;</div></td>
            </tr>
        </tfoot>
        <tbody>

                    <tr>
                        <td>
                            <div class="page">
                             ……content……   

                            </div> 
                            <div class="header-fill">I am  the header</div>
                            <div class="footer-fill">I am the footer</div>                       
                        </td>
                    </tr>

        </tbody>
    </table>
</div>

The printJS code for printing the report is this:

printJS({
   documentTitle:"ETP Water Report",
   printable: 'printable_report',
   type: 'html',
   targetStyles:"['*']",
   font_size:"",
 style:"@page{size: A4;margin-top:20mm;margin-bottom:20mm;}.page{page-break-after:always;} .header-space{height:100px !important;}.footer-space{height:100px !important;} .header-fill{position: fixed !important;top: 0 !important;height: 100px !important;width: 100% !important;}.footer-fill{position: fixed !important;bottom: 0 !important;height: 100px !important;width: 100% !important;} thead{display: table-header-group !important;}tfoot{display: table-footer-group !important;}"
});

Here are the links to the reference images related to the problem:

1. Overlap on chrome: https://i.stack.imgur.com/iRGZg.jpg

2. No overlap on firefox: https://i.stack.imgur.com/x1jwI.jpg

The overlap is happening on google-chrome and not on firefox. Is there any way to resolve this issue? How do I prevent content overlap with header & footer on chrome? Please help.