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.

Solution

Update following way:

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

Comments

[Jithin Raj P R]

Please read the Question clearly bro.. 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. this can only be achieved by position: fixed; in my opinion.

[agarwalankur85]

I got your question. Did you try the fiddle. Try print mode in chrome and you can see that the footer now appears on the last page only at the bottom of the page. position: fixed in print mode makes the footer appear on all the pages at the bottom of every page.

[agarwalankur85]

Here is the full screen view of the fiddle result. fiddle.jshell.net/ur6d1h21/12/show. Try print preview or enable print emulation from developer tools to check it out.

[Jithin Raj P R]

I can't use position: static; it will ruin the fixed bottom table - I want this in the last print view no matter what.

[Jithin Raj P R]

Please check the updated Question you will get my point bro. :) , sorry for the misunderstanding.

[Jithin Raj P R]

Bro, it will not work for me. I know z-index trick, the table is just a demo it can be other content before the table, which may not have the background and i just used the background so all can understand it more clear.

[Hanif]

I think you can easily wrap by a container which content will have dose not matter. Adding a container not a challenging at all.

[Jithin Raj P R]

Bro this is used in an app where the background can be different sometimes. so in the print, I will be needing the bg colour of the native page, not the container. But I will give you a +1 for the effort.

[simmer]

Hello! This answer would be more helpful with a few more details: which of the solutions in that linked question solved your issue? (Comments there seem to indicate that it's not solved) Do you have example code of your working solution you could share?