Repeat content in every printed sheet

Question

I have this structure in a web page, suppose that the table is very long.

<header>
   <h1><img src="//some_logo.jpg"/> 2016 Report</h1>
</header>
<section>
   <table style="width:100%">
     <tr>
       <th>Firstname</th>
       <th>Lastname</th> 
       <th>Age</th>
     </tr>
     <tr>
       <td>Jill</td>
       <td>Smith</td> 
       <td>50</td>
     </tr>
     <tr>
       <td>Eve</td>
       <td>Jackson</td> 
       <td>94</td>
     </tr>
   </table>
</section>
<footer>
   <h3><img src="//some_image.jpg"/> 2016 © The report company</h3>
</footer>

and what I need is to print this long table but with my header and my footer repeated in every page.

Like this

I already tried with position:fixed for header and footer but the thing is that the content slices under the header and the footer in every page.

CSS3 rules are not effective in Chrome.

I didn't find any solution with js.

Any ideas?

Did you take a look a the following question [How to use HTML to print header and footer on every printed page?](http://stackoverflow.com/questions/1360869/how-to-use-html-to-print-header-and-footer-on-every-printed-page) ? — DavidDomain, Jul 14 '16 at 21:06
@AlexKudryashev Will that help me solve my problem or is just a semantic advise? — George, Jul 15 '16 at 20:05

score 5 · Accepted Answer · answered Jul 15 '16 at 20:47

5

This example should work. See comments in the code.

<!DOCTYPE html>
<html>
<head>
<style>
/*@media print{ */
.tbl{display:table;}
.tbl > div{display:table-row;}
/* table structure is three level: table > row > cell */
.tbl > div > *{display:table-cell;}
/* special cases */
.tbl .tbl-head{display:table-header-group;}
.tbl .tbl-body{display:table-row-group;}
.tbl .tbl-foot{display:table-footer-group;}
/*} end of media print */
</style>
</head>
<body>

<div class="tbl">
<!-- I intentionally moved following (commented) block to the bottom
     to show that it appear at the top. For test purpose only ;) -->
<!--<div class="tbl-head">
<header>
   <h1><img src="//some_logo.jpg"/> 2016 Report</h1>
</header>
</div>-->
<div class="tbl-body">
<section>
   <!--your table here -->
</section>
</div>
<div class="tbl-head"><!--this block will go up -->
<header>
   <h1><img src="//some_logo.jpg"/> 2016 Report</h1>
</header>
</div>
<div class="tbl-foot"><!--This block go to the bottom from any valid place inside .tbl -->
<footer>
   <h3><img src="//some_image.jpg"/> 2016 © The report company</h3>
</footer>
</div>
</div>
</body>
</html>

answered Jul 15 '16 at 20:47

Alex Kudryashev

9,120
3
27
36

Did you try to print? Google Chrome print preview doesn't show header and footer on each page. FF and IE do. – Alex Kudryashev Jul 18 '16 at 14:46
I printed out from Chrome and Firefox (in case that ahve something to do with it) with no luck. – George Jul 18 '16 at 18:42
I copied HTML from your link, create a page, saved it on my dev server, open in FF 47.0.1 and print to PDF with headers and footers on each page. – Alex Kudryashev Jul 18 '16 at 20:02
2

Google Chrome has known bug https://bugs.chromium.org/p/chromium/issues/detail?id=24826 which is not fixed for 8 years. – Alex Kudryashev Jul 18 '16 at 20:06
I see... I tried again in FF (Mac) with PDF preview and it is working. Chrome is the problem with those css rules. Maybe there is a JS solution. Thank you @Alex – George Jul 18 '16 at 21:00

score 2 · Answer 2 · answered Jul 14 '16 at 22:11

2

Use below CSS in your print media stylesheet. (better use class name or id selector to avoid accidently messing up with similar tags elsewhere in the page..)

header {
  display: table-header-group;
}

section {
  display: table-row-group;
}

footer {
  display: table-footer-group;
}

answered Jul 14 '16 at 22:11

Galeel Bhasha

1,877
13
19

I guess it's not working or I'm doing something wrong http://i.imgur.com/lwDbrCO.png – George Jul 15 '16 at 20:08

Repeat content in every printed sheet

2 Answers2