0

I'm having trouble with adding proper margin to a table, when the table splits into several pages while printing.

Here's the code:

window.print(); //just for printing preview
body {
  -webkit-print-color-adjust: exact; //to show header color while printing
}

table {
  border-collapse: collapse;
  margin-top:2cm;
}

table,
th,
td {
  border: 1px solid black;
}

.myHeader{
  margin-left: 2cm;
  position: fixed;
  top:0;
  left:0;
  margin:0;
  background:yellow;
}
<div class="myHeader">
myHeader
</div>

<table class="myTable">
  <thead>
    <tr>
      <th>something</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        row
      </td>
    </tr>
    <tr>
      <td>
        row
      </td>
    </tr>
    <tr>
      <td>
        row
      </td>
    </tr>
    <tr>
      <td>
        row
      </td>
    </tr>
    <tr>
      <td>
        row
      </td>
    </tr>
    <tr>
      <td>
        row
      </td>
    </tr>
    <tr>
      <td>
        row
      </td>
    </tr>
    <tr>
      <td>
        row
      </td>
    </tr>
    <tr>
      <td>
        row
      </td>
    </tr>
    <tr>
      <td>
        row
      </td>
    </tr>
    <tr>
      <td>
        row
      </td>
    </tr>
    <tr>
      <td>
        row
      </td>
    </tr>
    <tr>
      <td>
        row
      </td>
    </tr>
    <tr>
      <td>
        row
      </td>
    </tr>
    <tr>
      <td>
        row
      </td>
    </tr>
    <tr>
      <td>
        row
      </td>
    </tr>
    <tr>
      <td>
        row
      </td>
    </tr>
    <tr>
      <td>
        row
      </td>
    </tr>
    <tr>
      <td>
        row
      </td>
    </tr>
    <tr>
      <td>
        row
      </td>
    </tr>
    <tr>
      <td>
        row
      </td>
    </tr>
    <tr>
      <td>
        row
      </td>
    </tr>
    <tr>
      <td>
        row
      </td>
    </tr>
    <tr>
      <td>
        row
      </td>
    </tr>
    <tr>
      <td>
        row
      </td>
    </tr>
    <tr>
      <td>
        row
      </td>
    </tr>
    <tr>
      <td>
        row
      </td>
    </tr>
    <tr>
      <td>
        row
      </td>
    </tr>
    <tr>
      <td>
        row
      </td>
    </tr>
    <tr>
      <td>
        row
      </td>
    </tr>
    <tr>
      <td>
        row
      </td>
    </tr>
    <tr>
      <td>
        row
      </td>
    </tr>
    <tr>
      <td>
        row
      </td>
    </tr>
    <tr>
      <td>
        row
      </td>
    </tr>
    <tr>
      <td>
        row
      </td>
    </tr>
    <tr>
      <td>
        row
      </td>
    </tr>
    <tr>
      <td>
        row
      </td>
    </tr>
    <tr>
      <td>
        row
      </td>
    </tr>
    <tr>
      <td>
        row
      </td>
    </tr>
    <tr>
      <td>
        row
      </td>
    </tr>
    <tr>
      <td>
        row
      </td>
    </tr>
    <tr>
      <td>
        row
      </td>
    </tr>
  </tbody>
</table>

The problem is that I would like to add header to every page, but the table is not applying margin while on 2nd page.

How can I archieve that?

Tomasz
  • 2,051
  • 3
  • 31
  • 64
  • See https://stackoverflow.com/questions/1360869/how-to-use-html-to-print-header-and-footer-on-every-printed-page-of-a-document, there does not seem to be a solution working on all three browsers as yet! – Joey Ezekiel Jun 09 '17 at 11:26
  • @JoeyEzekiel This does not answer my question. I already have a header visible on all pages, but the problem is about margins on a pages – Tomasz Jun 09 '17 at 11:33
  • overlapping content between the header/footer and the page content has been addressed there which seems to be your problem too since you have a fixed header. – Joey Ezekiel Jun 09 '17 at 12:06

0 Answers0