Table repeated footer group in chrome

Question

I have a long table with header and footer. What I want to do is to create a print function on the table. Below is an example of my code:

tfoot {
    display: table-footer-group;
    vertical-align: middle;
    border-color: inherit; 
}

<table>
 <thead>
  <tr>
   <td>This is a header</td>
  </tr>
 </thead>
 <tfoot>
  <tr><td>This is a footer</td></tr>
 </tfoot>
 <tbody>
  <tr>
   <td>Row</td>
  </tr>
  <tr>
   <td>Row</td>
  </tr>
  <tr>
   <td>Row</td>
  </tr>
  <tr>
   <td>Row</td>
  </tr>
  <tr>
   <td>Row</td>
  </tr>
  <tr>
   <td>Row</td>
  </tr>
  <tr>
   <td>Row</td>
  </tr>
  <tr>
   <td>Row</td>
  </tr>
  <tr>
   <td>Row</td>
  </tr>
  <tr>
   <td>Row</td>
  </tr>
 </tbody>
</table>

From the code above, when it comes to printing process, it shows that every printed page has its own header but it doesn't work out with their footer. My question is, how to display a footer in each of the long printed page.

http://stackoverflow.com/questions/18786653/html-header-and-footer-in-all-pages-while-printing-html-document — Bindrid, Dec 05 '16 at 03:27
http://stackoverflow.com/questions/1360869/how-to-use-html-to-print-header-and-footer-on-every-printed-page-of-a-document — knizer, Dec 05 '16 at 03:49

score 1 · Answer 1 · answered Dec 05 '16 at 03:30

From The CSS table model,

Print user agents may repeat header rows on each page spanned by a table.

Print user agents may repeat footer rows on each page spanned by a table.

In fact, most browsers do this.

Chrome implemented it only for headers (bug 24826) but not for footers (bug 620223).

I don't think there is much you can do.

Table repeated footer group in chrome

1 Answers1