Printing skeleton for printing documents with repeating header and footer

Printing.md

Printing Guide

Printing documents in HTML can be tricky at times specially when the content is large and if it requires a repeating headers and footers.

Print Skeleton

<table>
  <!-- Header section -->
  <thead>
    <tr>
      <td>
        <!-- Youre header here -->
      </td>
    </tr>
  </thead>

  <!-- Body or content section -->
  <tbody>
    <tr>
      <td>
        <!-- Your content here -->
      </td>
    </tr>
  </tbody>

  <!-- Footer section -->
  <tfoot>
    <tr>
      <td>
        <!-- Your footer here -->
      </td>
    </tr>
  </tfoot>
</table>

The Parts

We can break down a printed document into 3 parts. The header, the body, and the footer.

The header

The header may contain the document letter head or any other kinds of header that you wish.

The body

In the body section goes the main content of the document that you wanna print.

The footer

Similar to the header, this can contain anything. But most of the time, signature sections are mostly what we put here.

Repeating

By default, the HTML snippet above won't repeat itself per page. There's a specific css propery that we need to apply to the header and and the footer section for it to work.

<!-- Header section -->
<thead style="display: table-header-group;">
  <tr>
    <td>
      <!-- Youre header here -->
    </td>
  </tr>
</thead>

In the code above, you'll notice that we added the style property with value display: table-header-group;. Now the header will become sticky and it will repeat itself on the top of every page.

The same goes for the footer, only the value for display property is a bit different. Instead of table-header-group you must put table-footer-group. Like so:

<!-- Footer section -->
<tfoot style="display: table-footer-group;">
  <tr>
    <td>
      <!-- Your footer here -->
    </td>
  </tr>
</tfoot>

Example

You'll notice that the only difference between the two is the style property in both thead and tfoot. Download or copy both code and run it on your browser, then press Ctrl + P or Cmd + P if you're using mac.

Printing without repeating header and footer

https://gist.github.com/jofftiquez/f43ee53c8316d5ec94387eab58d6e3a0

Printing with repeating header and footer

https://gist.github.com/jofftiquez/0e4ff3828badbd7763296d512d3b3b9a