Adding header for dynamic pages on print

Question

I have multiple tables that fill dynamically.

I want to print header on every pages in print mode, But when a table rows doesn't fit on the page they print on the next page and my header print on them. Like this : This is my print preview

how can I set a margin between page header and pages data?

I searched a lot but nothing seems to work, even position:fixed doesn't work as expected.

 @page {
       size: A4;
       margin-left: 0px;
       margin-right: 0px;
       margin-bottom: 0px;
       margin-top: 0px;
  }
@media screen {
     .header {
         display: none;
      }
  }

@media print {

    .header {
        position: fixed;
        top:10px;
        width:100%;
        margin:10px;
        border: 3px solid #000;
    }
}

Sample Html:

<table class="header">
    <tr>
        <td>
         This is my header table
        </td>
    </tr>
 </table>

<table>
   ....
</table>

<table>
  ....
</table>

and more...

Lorenz Meyer · Answer 1 · 2017-02-25T11:27:35.587

0

You could simply add a margin at the bottom of the header.

@media print {
    .header {
        width:100%;
        margin:10px;
        margin-bottom: 100px;
        border: 3px solid #000;
    }
}

This does not work to gether with position: fixed;, without it works.

edited Feb 25 '17 at 11:27

answered Feb 25 '17 at 08:42

Lorenz Meyer

19,166
22
75
121

Yes, I tried that ,tnx But unfortunately doesn't work – Samira kalantari Feb 25 '17 at 09:03
@SaMirakf I tried. When removing `position: fixed; top: 10px;` it works. – Lorenz Meyer Feb 25 '17 at 11:28
If i remove position:fixed the header will print on one page while i want every pages – Samira kalantari Feb 25 '17 at 11:42

Adding header for dynamic pages on print

1 Answers1