Printed HTML table don't apply margins in all pages

Asked 29/6, 2018 at 12:57 Answered 21/9, 2022 at 7:25

html css page-break printing-web-page page-break-inside

I have this html:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style type="text/css">
    table { 
        page-break-inside: auto;
        margin-top: 50mm;
        margin-bottom: 50mm;
    }
    tr    { page-break-inside: auto; page-break-after: auto }
    thead { display: table-header-group;}
    tfoot { display: table-footer-group;}

    #header { 
        position: fixed; 
        width: 100%; 
        top: 0; 
        left: 0; 
        right: 0;
    }
    #footer { 
        position: fixed; 
        width: 100%; 
        bottom: 0; 
        left: 0;
        right: 0;
    }
</style>
</head>
<body>

    <div id="header"> 
        <p>Personalised header</p> 
    </div>
    <div id="footer"> 
        <p>Personalised footer</p> 
    </div> 

    <table>
        <thead>
            <tr><th>heading</th></tr>
        </thead>
        <tfoot>
            <tr><td>notes</td></tr>
        </tfoot>
        <tbody>
        <tr>
            <td>x</td>
        </tr>
        <tr>
            <td>x</td>
        </tr>
        <tr>
            <td>x</td>
        </tr>

        <tr>
            <td>x</td>
        </tr>
        <!-- Mor than 500 similar tr-->
        <tr>
            <td>x</td>
        </tr>
    </tbody>
    </table>
</body>
</html>

It's a big table. The table have top and bottom margins, but only apply margin-top in the first printed page and margin-bottom in the last printed page:

How can a I resolve this problem? I want the fixed positions of the headers and footers of the page, but the table I want that margins applies in all printed pages.

Indoeuropean answered 29/6, 2018 at 12:57 Comment(0)

You can use the @page selector to add spacing around your page like this:

@page { margin: 50px }

Lunalunacy answered 29/6, 2018 at 13:8 Comment(4)

Actually that works, but I had simplified the problem too much, and eliminated an important part. I want a header and a footer on each printed page. I have modified the statement of the problem. Sorry. I vote you positive because your answer is correct. – Indoeuropean 29/6, 2018 at 19:54

@Indoeuropean There is a great article to this jessicaschillinger.us/2017/blog/print-repeating-header-browser – Lunalunacy 30/6, 2018 at 11:39

Thanks, it's not exactly what I was looking for, but I think I can adapt to it – Indoeuropean 10/7, 2018 at 8:44

@FurkanPoyraz Really helpful article, you can find it here: web.archive.org/web/20200728073454/http://… – Jennie 17/5 at 12:24

I was able to do it the following way.

@media print {
   table {
       position: relative;
       top: 50px;
   }
}

Disc answered 21/9, 2022 at 7:25 Comment(0)

Recommended topics

Hot tags