Set margin for every CSS page-break start

Question

Pardon me for the title, i couldn't find more accurate description for it.

I'm breaking a long rows in a table into several pages. Everything is ok with page-break-after for TR. My only problem is, it starts at very beginning and ends at very bottom of a page making my header & footer covered with table data. I tried putting margin and padding everywhere but none seems to work. Below is my CSS,

@media print {

    html, body {
        width: 210mm;
        height: 297mm;  
        background:#fff;
    }
    .page-layout {
        border: initial;
        border-radius: initial;
        width: initial;
        min-height: initial;
        box-shadow: initial;
        background: initial;
        page-break-after: always;           
    }       
    table.report { page-break-after:auto }
    table.report tr    { page-break-inside:avoid; page-break-after:auto }
    table.report td    { page-break-inside:avoid; page-break-after:auto }
    table.report thead { display:table-header-group; margin-top:50px; }
    table.report tfoot { display:table-footer-group }

    .header {
        display:block; 
        position:fixed; 
        top: 0px;   
        font-weight:bold;
        font-size:14px;
        text-align:right;
        right:0px;
    }
    .footer {
        z-index: 1;
        position: fixed;
        left: 0;
        bottom: 0;
        text-align: left;
        left: 0;
        width:100%;
        display:block;
    }       
}

Below is my HTML

<div class="header">MY HEADER</div> 
<div class="page-layout">
<div style="font-weight:bold; font-size:14px; text-align:center; margin-bottom:20px">REPORT TITLE</div>

<table width="100%" border="1" style="border-collapse:collapse" class="report">
<thead>
<tr>
<th width="10%">Col1</th>
<th width="60%">Col2</th>
<th width="10%">Col3</th>
<th width="20%">Col4</th>
</tr>
</thead>
<tbody>
<?php for ($x=1; $x<100; $x++) {//loop ?>
<tr>
<td align="center"><?=$x?></td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<?php } //endloop ?>
</tbody>
</table>

</div>  
<div class="footer">MY FOOTER</div>

Here is what it looks like when printing,

Answer 1

After intensive research on the net, i found that there is no proper way to do it. There is a discussion about @page rule that likely what i intended to achieve. Unfortunately it didn't work. I learned that this feature have not been implemented on most browser yet. I don't know which browser support it. Finally, i have came across some trick. THEAD and TFOOT are designed to repeat on print. So i put a blank row on the thead top, leaving an empty space every time it was repeated, just enough for the header to show up. And also an empty row below tfoot for footer area. Unfortunately, tfoot didn't repeat itself on chrome. IE and Firefox are ok.

Answer 2

If you have this kind of problems when after and before table start needs some extra space for other page footer, like this:

you can fix it this way:

<style>
   @media print {
   .table-breaked {
      page-break-before: auto;
   }
   .no-border{
      border: none !important;
   }
   .footer-repeat {
      display: table-footer-group;
     }
   }
</style>


<div class="table-breaked">
 <table class="pt-20">
      <thead>
         <tr class="no-border">
            <td class="no-border">&nbsp;</td>
         </tr>
          <!-- add extra space for printing -->
         <tr class="no-border">
            <td class="no-border">&nbsp;</td>
         </tr>
         <!-- add extra space for printing -->
         <tr>
            <th class="text-center">Value 1<br/>№ Date</th>
            <th class="text-center">Value 2</th>
            <th class="text-center">Value 3</th>
            <th class="text-center">Value 4</th>
            <th class="text-center">Value 5</th>
         </tr>
      </thead>
      <tbody>
       <!-- more trs here -->
         <tr>
            <th>Data</th>
            <th>Data</th>
            <th>Data</th>
            <th>Data</th>
            <th>Data</th>
         </tr>
      </tbody>
      <tfoot class="footer-repeat">
         <!-- add repeated tfoot for extra space -->
         <tr class="no-border">
            <td class="no-border">&nbsp;</td>
         </tr>
         <tr class="no-border">
            <td class="no-border">&nbsp;</td>
         </tr>
         <tr class="no-border">
            <td class="no-border">&nbsp;</td>
         </tr>
         <tr class="no-border">
            <td class="no-border">&nbsp;</td>
         </tr>
         <tr class="no-border">
            <td class="no-border">&nbsp;</td>
         </tr>
      </tfoot>
   </table>
</div>

Here is a result:

Answer 3

You can use

@page{
  size: A4;
  margin-top: 50px;
  margin-bottom: 50px;
}