4

I have a problem with printing a HTML table and I didn't find any solutions so I hope you can help me.

I need create table (probably with CSS) with these two rules:

  1. When HTML table exceeds to the next A4 page I need repeat the HTML header on top of the new page;

  2. I need to define some section in the table - this section has to be on the same page - it can not be split on more pages... In the table will be more sections and every section has to be whole on one Page (one A4 page can hold more sections, but one section can not be split to more A4 pages).

Can you help me?

EDIT: it is working now, but I would like to apply the margin to the thead on the top of every page, but it is not working.

<html>
    <head>
        <title>pokus</title>
        <meta charset='UTF-8' />
        <style type='text/css'>

        @media print
        {
            tbody {
                page-break-inside: avoid;
            }
            thead {
                display: table-header-group;
                margin-top: 100px;
            }
        }
        </style>
    </head>
    <body>
    <table>
        <thead>
            <tr>
                <td>Column 1</td>
                <td>Column 2</td>
                <td>Column 3</td>
            </tr>
        </thead>
        <tbody>
            <tr><td>Blok1</td><td>Blok1</td><td>Blok1</td></tr>
            <tr><td>Blok1</td><td>Blok1</td><td>Blok1</td></tr>
            <tr><td>Blok1</td><td>Blok1</td><td>Blok1</td></tr>
            <tr><td>Blok1</td><td>Blok1</td><td>Blok1</td></tr>
            .... more rows ... 
            <tr><td>Blok1</td><td>Blok1</td><td>Blok1</td></tr>
            <tr><td>Blok1</td><td>Blok1</td><td>Blok1</td></tr>
        </tbody>
        <tbody>
            <tr><td>Blok2</td><td>Blok2</td><td>Blok2</td></tr>
            <tr><td>Blok2</td><td>Blok2</td><td>Blok2</td></tr>
            .... more rows ....
            <tr><td>Blok2222222</td><td>Blok2</td><td>Blok2</td></tr>
        </tbody>
        <tbody>
            <tr><td>Blok3</td><td>Blok3</td><td>Blok3</td></tr>
                    ....more rows
            <tr><td>Blok3</td><td>Blok3</td><td>Blok3</td></tr>
        </tbody>
    </table>
    </body>
</html>
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Lubos Marek
  • 178
  • 1
  • 3
  • 13
  • Check here for the answer: http://stackoverflow.com/questions/3341485/how-to-make-a-html-page-in-a4-paper-size-pages – gothical Feb 12 '16 at 14:03

1 Answers1

8

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>
Clyff
  • 4,046
  • 2
  • 17
  • 32
  • Hello, thanks for your reply. It seems very good :) but another problem :( the "thead" is on of top at the page :( I would like to apply margin to the "thead" but it isn't working ..... thead { display: table-header-group; margin-top: 100px; } – Lubos Marek Feb 12 '16 at 14:21
  • maybe this will help you: http://stackoverflow.com/questions/1542320/margin-while-printing-html-page – Clyff Feb 12 '16 at 14:29
  • If not, can you please edit your question with a sample of the html table and another sample of the css you are using? Is more readable there. – Clyff Feb 12 '16 at 14:29
  • great, thank you :) Is it possible a little bit change table header when the header goes to the next page? (add a note to the header when it is in a next page? The first page it should be without the note)? – Lubos Marek Feb 15 '16 at 09:49