How to make the table header repeat on all pages

Asked

Viewed 5,368 times

2

I’m trying to print using CSS and I have a table with thead and tfoot, I’m trying to do with this print on all pages the table header, but the result is the same, it shows only on the first page and the others does not work. If I manage to put the header and footer of the table on each page I will have the behavior I want that is in printing a table on each page.

I tried so

thead   {display: table-header-group;   }
tfoot   {display: table-footer-group;   }
  • How are you dividing content into pages? Manually, or letting the browser do it for you?

  • leaving the browser, because it is a table that overflows the page size.

1 answer

3


The thead and the tfoot were made for this, but some browser do not adapt very well with this, mainly the Chrome that has a bug. Apparently the bug is also present in Safari and Opera.

I believe you will have to do by hand or look for some solution in javascript.

Emergency technical resource I realized that if I had PDF generated, it would work normally. A workable solution can be to generate a PDF when the user wants to print. Staples the hot keys CTRL + P with Javascript, and when the user presses, you can open a popup with the generated PDF already having printed.

Note: It is only an alternative if it is really necessary that the header appears repeating when printed on Chrome. This way would be standard for all browsers, and avoid support with the famous PDF printer

Extra:

A good guide on creating tables can be found in css-Tricks

  • I saw now that it was a bug, I saw that in firefox and incredibly in IE works

  • I had PDF generated via browser on Chrome and it still didn’t work.

  • tries to generate the PDF using some language class you are using. In PHP you can use the FPDF

Browser other questions tagged

You are not signed in. Login or sign up in order to post.