CODEWITHSUNDEEP
javascripthtmlcssprintinghtml-table
Keith Pickering
Keith Pickering

Reputation: 786

Printing a multi-page HTML table with a non-overlapping footer on each page

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.

Upvotes: 2

Views: 4809

Answers (3)

mutasam hazzah
mutasam hazzah

Reputation: 31

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.

Upvotes: 0

itacode
itacode

Reputation: 3787

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;
  }
}

Upvotes: 1

Erik Hermansen
Erik Hermansen

Reputation: 2379

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.

Upvotes: 0

Related Questions