I have a table that i want to print using JS window.print();. But when this table have too many lines oter pages dosen't preserve seted margins

My CSS:

@page { size:  auto; margin: 0px; }
html  { background-color: #FFFFFF; margin: 0px; }
body  { margin: 10mm 10mm 10mm 10mm; }
tbody > td > span { font-size: 14px !important; }

How can I force this table breaks to preserve margins?

Click on any element to print: /

I have a table that i want to print using JS window.print();. But when this table have too many lines oter pages dosen't preserve seted margins

My CSS:

@page { size:  auto; margin: 0px; }
html  { background-color: #FFFFFF; margin: 0px; }
body  { margin: 10mm 10mm 10mm 10mm; }
tbody > td > span { font-size: 14px !important; }

How can I force this table breaks to preserve margins?

Click on any element to print: https://jsfiddle/kfubawpg/

• javascript
• jquery
• html
• css
• printing

Share Improve this question Follow asked Apr 6, 2017 at 17:35 gFontanivagFontaniva 9031111 silver badges3030 bronze badges 2

• What do you mean exactly? The top-margin of the header on the following pages? – Legends Commented Apr 6, 2017 at 17:51
• the margin-top and margin-bottom of breacked tables – gFontaniva Commented Apr 6, 2017 at 18:01

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

You have the @page margin set to 0. Just change it to the size of the margin you want.

@page { size:  auto; margin: 50px; }

fiddle

You can do the following:

    @page :first { // set the margins for the first page in print mode
      margin: 100px;
    }

    @page { // set the margins for all following pages (tables) in print mode
    size:  auto; 
    margin-top: 10px;
    margin-bottom: 10px;
    }

Here is a demo