Print Table Footer at the Very Bottom on Last Page

Print table footer at the very bottom on last page

If you're only supporting Firefox, this is actually really easy. (Skip to the edit to see a technique that also works in IE but is less versatile. Chrome and the other webkit browsers didn't support repeating footers when I posted this answer, so I didn't test them).

All you have to do is add a large bottom margin at the end of your content. The exact size doesn't matter, but it must be large enough to be guaranteed to run past the end of the page. I recommend making it at least as large as the maximum paper size you think your users will use.

Don't worry, this won't add a blank page to the end of your document. Margins differ from other forms of white space (such as padding and <br> tags) in that they get cancelled out when they exceed the page boundary (see spec, section 13.3.3). Both Firefox and IE will delete the margin, but Firefox will still generate a footer at the bottom of the page as if a page break had occurred. (IE, on the other hand, behaves as if the margin was never there, which is why this approach doesn't work in that browser.)

You can put the margin on a pseudo-element to keep your HTML tidy, and you can use @media print to prevent it from showing on screen.

Here's the code. To see it work in Firefox, open this jsfiddle, right-click the output, select This Frame > Show Only This Frame, and do a print preview.

@media print {

  #content:after {

    display: block;

    content: "";

    margin-bottom: 594mm; /* must be larger than largest paper size you support */

  }

}

<table>

  <thead>

    <tr>

      <th>PAGE HEADER</th>

    </tr>

  </thead>

  <tfoot>

    <tr>

      <td>PAGE FOOTER</td>

    </tr>

  </tfoot>

  <tbody>

    <tr>

      <td id="content">

        content<br>content<br>content<br>content<br>content<br>content<br>content<br>

        content<br>content<br>content<br>content<br>content<br>content<br>content<br>

        content<br>content<br>content<br>content<br>content<br>content<br>content<br>

        content<br>content<br>content<br>content<br>content<br>content<br>content<br>

        content<br>content<br>content<br>content<br>content<br>content<br>content<br>

        content<br>content<br>content<br>content<br>content<br>content<br>content<br>

        content<br>content<br>content<br>content<br>content<br>content<br>content<br>

        content<br>content<br>content<br>content<br>content<br>content<br>content<br>

        content<br>content<br>content<br>content<br>content<br>content<br>content<br>

        content<br>content<br>content<br>content<br>content<br>content<br>content

      </td>

    </tr>

  </tbody>

</table>

Add table at the bottom of last page without using footer

There's a lot of ways to do this, but this is the best one I think, I also use it personally:

make sure html and body have 100% height
wrap the two tables in a div and give it display: flex; with flex-direction: column; and justify-content: space-between;
give the div a height of the available space (100% - footer height)

Check out the snippet bellow:

*{/* those only to remove margins */
  margin:0;
  padding:0;
  box-sizing:border-box;
}
html,body{/* make sure to give html and body 100% height */
  height:100%;
}
.container{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  height: calc(100% - 45px); /* 100% - footer height (thats the available space)*/
  /* Change the 45px to the footer height */
}
footer{/* footer sample */
  height:45px;
  background-color:#223;
  color:#fff;
}

<html>
<body>
<div class="container">
<table class="body" style="width: 100%; margin-top: 10px;">
    <td><#--- Body table ---></td>
</table>

<table class="recap">
    <td><#--- Table to keep at the bottom ---></td>
</table>
</div>
<footer>This is the footer</footer>
</body>
</html>

How to fix the footer to make it positioned at the end of the page? (css print)

Try this CSS in print as you used.

.report-footer{
  position: fixed;
  bottom: 0;
  background:red;
  display: block;
  width:100%;
}

<table class="report-container">
    <thead class="report-header">
        <tr>
            <th>
                <h1>Header</h1>
            </th>
        </tr>
    </thead>

    <tbody class="report-content">
        <tr>
            <td>
                <!-- body -->
            </td>
        </tr>
    </tbody>
    <tfoot class="report-footer">
        <tr>
            <td>
                <h1>Footer</h1>
            </td>
        </tr>
    </tfoot>
</table>

Print Table Footer at the Very Bottom on Last Page