CSS: Repeat Table Header after Page Break (Print View)

Erik Márföldi picture Erik Márföldi · Jul 27, 2011 · Viewed 22.6k times · Source

I have html table for printing with repeat header and footer. Everything works, document to break automatically. But now i would like to break page after any element. I use to css property page-break-after and set it to always. Yes, its works, but i got another problem. Page after break dont repeat header and footer of table. What is wrong?

Browsers: IE8.

Print styles:

table thead {display: table-header-group;}
table tfoot { display: table-footer-group;}
table tbody { display: table-row-group;}
.page-break { page-break-after:always;}

Html code:

<table>
<thead>
    <tr>
        <th>...</th>
    </tr>
</thead>
<tfoot>
    <tr>
        <td>...</td>
    </tr>
</tfoot>
<tbody>
    <tr>
        <td>page 1</td>
    </tr>
    <tr class="page-break">
        <td>content</td>
    </tr>
    <tr>
        <td>Page 2</td>
    </tr>
    <tr>
        <td>content 2</td>
    </tr>
</tbody>
</table>

Answer

Semyazas picture Semyazas · Jul 27, 2011

try to add the following css:

thead {display: table-header-group;}

The footer is not repeated on each page, but rather printed on the last only in IE8, iirc.