2

I've searched tirelessly and although I've found many people asking about this problem, there don't seem to be any consistent solutions.

We have a page on which a user can enter a date range, then press submit to return a table of data. A "print" button exists which obviously prints the generated data.

All browsers seem to be able to split the long table into several pages, as expected. We can also get some predefined footer text to show up on each page by using a footer div with some CSS like this:

.footer {
    position: fixed;
    bottom: 0;
}

The only problem is that the table rows have inconsistent heights, so on some pages there's plenty of room for the footer, but on other pages the table and the footer overlap.

Things I have tried:

@page {
    margin-bottom: 10mm;
}

Adds a margin, but the bottom: 0; fixed position of the footer is now considered to be too high up, i.e. there's still an overlap but with a bunch of space at the bottom of the page. Setting the bottom property to a negative value just makes it appear at the top of the next page instead.

@page {
    padding-bottom: 10mm;
}

No noticeable effect at all.

...And that's pretty much all I can think of. What can we do about this? Do we need some kind of custom JS solution to calculate the number of rows on each page and insert a footer manually? There must be somebody who has had success with printing footers; it doesn't seem like an uncommon requirement.

Keith Pickering
  • 696
  • 10
  • 24

3 Answers3

1

Please try to add this at the bottom of css file or after the last body affecting rule eventually adding also !important:

@media print {
  body {
    padding-bottom: 10mm;
  }
}
itacode
  • 3,721
  • 3
  • 21
  • 23
0

There may be a more elegant solution, but you can do this in JS with an algorithm along the lines of:

while there is still vertical room left...
   output a row to DOM
   measure height of new row and recalc how much vertical room is left

For getting the height of an element, you could take a look at this other answer.

That may seem like a pain, but you'll have a lot of control over your rendering, and it should work fine.

Erik Hermansen
  • 2,200
  • 3
  • 21
  • 41
  • What should be done when there's no more room for another row? Is there a way to insert a page break for the print rendering? – Keith Pickering Jun 02 '17 at 02:16
  • Maybe try this to add a page break with CSS, Keith. ://www.w3schools.com/cssref/pr_print_pageba.asp – Erik Hermansen Jun 02 '17 at 15:28
  • Unfortunately `page-break-before: always` and `page-break-after: always` aren't working in Chrome. What is Chrome's deal with print styles? Is there any known fix for this? – Keith Pickering Jun 02 '17 at 18:01
  • I'd start a new question focused on that. It helps the community to keep your questions dealing with one issue at a time. – Erik Hermansen Jun 02 '17 at 18:10
  • 2
    Anyone else who experiences this problem: the JS looping is the only way to go if you need Chrome compatibility. Save the thead in a variable (if applicable), loop through all your rows, count the height of each, and when it reaches a certain height breakpoint, append the table and move on to a new one (appending the thead each time). Make sure your tables have `page-break-after: always` and it should work. This is far from elegant but it's the only thing that works in all browsers. – Keith Pickering Jun 08 '17 at 18:04
0

i was having the same problem last day i search for hours to solve it. the solve was adding these to css.

thead { display: table-header-group }

tfoot { display: table-row-group }

tr { page-break-inside: avoid }

ps: don't add relative position to the table never because it wouldn't work properly.

Madhur Bhaiya
  • 28,155
  • 10
  • 49
  • 57
mutasam hazzah
  • 31
  • 3