Repeat Table Headers in Print Mode

Repeat table headers in print mode

This is what the THEAD element is for. Official docs here.

Having Google Chrome repeat table headers on printed pages

I believe this is a bug in Chrome.

HTML table should repeat header on every page and Sections should not be broken into 2 pages

You can accomplish what you want with some css and html:

1) Use thead tags. As the doc says:

(...) Also, when printing a large table that spans multiple pages,
these elements can enable the table header and footer to be printed at
the top and bottom of each page.

2) You can use the page-break-inside property. See more here.

If you have any trouble applying that in your project, feel free to edit your question with details of what you did and what's the unexpected behavior.

Edit:

About the margin, i'm not sure why but it seens we can't add margin to that element... but you can use padding for that. IE:

<style type="text/css">
    ... your css ... 

    thead tr {
        padding-top: 100px;
    }
</style>

---

Related Topics