title: How to print the header and footer of the HTML page
body: <p>I tried to add the header and footer in each page for the HTML print. I write the below code </p>
  
  <pre class="lang-css prettyprint-override"><code>@page {
    @top-left {
      content: "this is the page header";
    }
  }
  
  @page: right {
    @bottom-right {
      content: counter(page) "page";
    }
  }
  
  </code></pre>
  
  <p>It is not working. I think the @bottom-right, @bottom-left etc features are removed in recent CSS update. These elements not showing anything. I already tried the following code </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;style&gt;
  @media print {
    .page-header {
      position: fixed;
      top: 0;
      right: 0;
    }
  
    .page-footer {
      position: fixed;
      bottom: 0;
      right: 0;
    }
  }
  &lt;/style&gt;
  &lt;section class='print-me'&gt;
     &lt;div class='row'&gt;
        &lt;div col='6'&gt;..... dynamically generated text, graphs and images about 30 pages long which are difficult to handle manually ....&lt;/div&gt;
     &lt;/div&gt;
  &lt;/section&gt;
  
   &lt;!-- I need this page header and footer in every page --&gt;
   &lt;h5 class="page-header"&gt;..... copyright and logo ...../h5&gt;
   &lt;h5 class="page-footer"&gt;..... page number: .....&lt;/h5&gt;
   &lt;!-- I want to generate page number dynamically --&gt;
  
  </code></pre>
  
  <p>Since I have around 30 pages of HTML content having very long paragraphs which are generated dynamically, if I tried the second method, It will overlap with header and footer.</p>
  
  <p><strong>edit</strong>: <a href="https://medium.com/@Idan_Co/the-ultimate-print-html-template-with-header-footer-568f415f6d2a" rel="nofollow noreferrer">I found this article on medium</a>. This helps me to generate the header and footer somehow. But this technique also breaks my tables inside the report. There is also missing the page number generation part? </p>