title: Set margin for every CSS page-break start
body: <p>Pardon me for the title, i couldn't find more accurate description for it.</p>
  
  <p>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 &amp; footer covered with table data.
  I tried putting margin and padding everywhere but none seems to work.
  Below is my CSS,</p>
  
  <pre><code>@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;
      }       
  }
  </code></pre>
  
  <p>Below is my HTML</p>
  
  <pre><code>&lt;div class="header"&gt;MY HEADER&lt;/div&gt; 
  &lt;div class="page-layout"&gt;
  &lt;div style="font-weight:bold; font-size:14px; text-align:center; margin-bottom:20px"&gt;REPORT TITLE&lt;/div&gt;
  
  &lt;table width="100%" border="1" style="border-collapse:collapse" class="report"&gt;
  &lt;thead&gt;
  &lt;tr&gt;
  &lt;th width="10%"&gt;Col1&lt;/th&gt;
  &lt;th width="60%"&gt;Col2&lt;/th&gt;
  &lt;th width="10%"&gt;Col3&lt;/th&gt;
  &lt;th width="20%"&gt;Col4&lt;/th&gt;
  &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
  &lt;?php for ($x=1; $x&lt;100; $x++) {//loop ?&gt;
  &lt;tr&gt;
  &lt;td align="center"&gt;&lt;?=$x?&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td align="center"&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;?php } //endloop ?&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  
  &lt;/div&gt;  
  &lt;div class="footer"&gt;MY FOOTER&lt;/div&gt;
  </code></pre>
  
  <p>Here is what it looks like when printing,
  <a href="https://i.stack.imgur.com/DFAyG.png" rel="noreferrer"><img src="https://i.stack.imgur.com/DFAyG.png" alt="enter image description here"></a></p>