在打印时，如何在 CSS 页面上重复页眉和页脚横幅？

Question

My banners are divs and this what the HTML looks like:

<div class="top-banner">
  UNCLASSIFIED
</div>

<table class="print-section">
  <thead>
    <tr>...</th
      <th>...</th
      <th>...</th
    <tr>...</th
  </thead>

  <tbody>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr> 
  </tbody>

</table>

<div class="bottom-banner">
  UNCLASSIFIED
</div>

CSS Style Sheet looks like this:

@media print {
 .print-section {
   display: table;
   overflow: visible;
 }

 .top-banner, .bottom-banner {
  display: block;
  width: 100%;
  color: green;
 }
}

Problem: Only the bottom banner shows at the end of page when the table breaks into another page on print. How do I fix this?

Answer 1

If you add this to your @media print CSS it should show the banners on each printed page. You will probably want to look at margins too depending on what you are printing to.

  .bottom-banner {
    position: fixed;
    bottom: 0;
  }
   .top-banner {
    position: fixed;
    top: 0;
  }