Fixed Sticky footer for PRINT only for last page

Question

What I have is a <table> it can be big or small sometimes only on one page and sometimes it can grow to be 10 pages and so.

Here is a sample code:

div{
  position:relative;
  height:100vh;
}

.table-blue{
  width:100%;
  background:lightblue;
}

.table-blue td{
  padding:5px 10px;
}

.table-blue-fotter{
    position: absolute;
    bottom: 20px;/* for bottom gap */
    left: 0px;
    width:100%;
    background:gray;
}


@media print {
 .table-blue-fotter{
    position: fixed;
    bottom: 20px;
    left:0px;
    width:100%;
    background:gray;
}

<div>
<table class="table-blue">
  <tr>
    <td>one</td>
    <td>one test</td>
  </tr>
  <tr>
    <td>two</td>
    <td>two test</td>
  </tr>
  <tr>
    <td>three</td>
    <td>three test</td>
  </tr>
</table>

<table class="table-blue-fotter">
  <tr>
    <td>one</td>
    <td>one test</td>
    <td>one test</td>
  </tr>
  <tr>
    <td>two</td>
    <td>two test</td>
    <td>one test</td>
  </tr>
  <tr>
    <td>three</td>
    <td>three test</td>
    <td>one test</td>
  </tr>
</table>

</div>

Fiddle for property inspection - this workes good for me. But if the table gets long the story will change to this.

In the second view when the first <table> gets long, in the print view the footer appears on every page.

So what I want is to the .table-blue-fotter to appear only on the last page of the print view in the page bottom edge no matter the content height is.

only on Last page

Hopping for a CSS fix.

Answer 1

Update following way:

@media print {
  .table-blue-fotter {
    position: static; /* <-- Key line */
    bottom: 20px;
    left: 0px;
    width: 100%;
    background: gray;
  }