title: Printable Invoice with CSS / HTML
body: <p>I'm trying to use html / css to build an printable invoice format:  </p>
  
  <p>What i'm trying to achieve<br>
  1. repeat the header on all page<br>
  2. have a text footer sticky to all pages  </p>
  
  <p>The problems :)<br>
  1.If the header is too big ( in height ) it will appear only one first page, I did a lot of research but I couldn't find anything about this. Did anyone manage to have it repeat on every page ?</p>
  
  <p>2.The text footer is overlapping the invoice table. I tried to give padding to the .page container, to body to html, tried to change the margins of the page and put it outside, nothing worked.  </p>
  
  <p>Edit Mode
  <a href="https://codepen.io/g_emanuel/pen/VQdeyX/" rel="nofollow noreferrer">https://codepen.io/g_emanuel/pen/VQdeyX/</a></p>
  
  <p>Debug Mode so can use CTRL+P <a href="https://s.codepen.io/g_emanuel/debug/VQdeyX/jVMpogGvQGyk" rel="nofollow noreferrer">https://s.codepen.io/g_emanuel/debug/VQdeyX/jVMpogGvQGyk</a></p>
  
  <p>Thanks!</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;meta name="google" value="notranslate"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class="page"&gt;
      &lt;table class="invoice"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;Invoice Header&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
  
          &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;td&gt;Invoice body item&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Invoice body item&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Invoice body item&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Invoice body item&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Invoice body item&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Invoice body item&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Invoice body item&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Invoice body item&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Invoice body item&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Invoice body item&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Invoice body item&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Invoice body item&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Invoice body item&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Invoice body item&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Invoice body item&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Invoice body item&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Invoice body item&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Invoice body item&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Invoice body item&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Invoice body item&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Invoice body item&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Invoice body item&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Invoice body item&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Invoice body item&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Invoice body item&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Invoice body item&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Invoice body item&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Invoice body item&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Invoice body item&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Invoice body item&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Invoice body item&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Invoice body item&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Invoice body item&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
  
          &lt;tfoot&gt;
        &lt;/tfoot&gt;
       &lt;/table&gt;
  
      &lt;div class="disclaymer"&gt;
          lorem lipsum
      &lt;/div&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>