11

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.

enter image description here

only on Last page

Hopping for a CSS fix.

Jithin Raj P R
  • 6,667
  • 8
  • 38
  • 69
  • "in the print view the footer appears on every page." means where is your "every page" here we can't see the every page but single page. Can you little clarify more here? – Hanif Feb 19 '18 at 06:01
  • @Hanif "In every page" means on print view. If you use this - https://jsfiddle.net/jithinrajpr7/ur6d1h21/ in an HTML file and click `ctr`l + `p` then you will get the code spread more than one print view and in that you will see "footer appears on every page." – Jithin Raj P R Feb 19 '18 at 06:42

4 Answers4

5

Update following way:

@media print {
  .table-blue-fotter {
    position: static; /* <-- Key line */
    bottom: 20px;
    left: 0px;
    width: 100%;
    background: gray;
  }
Fons
  • 1,527
  • 12
  • 11
Hanif
  • 3,739
  • 1
  • 12
  • 18
  • I can't use `position: static;` it will ruin the fixed bottom table - I want [this](https://ibb.co/hsZ5qn) in the last print view no matter what. – Jithin Raj P R Feb 19 '18 at 07:16
  • 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. – Jithin Raj P R Feb 19 '18 at 09:17
  • I think you can easily wrap by a container which content will have dose not matter. Adding a container not a challenging at all. – Hanif Feb 19 '18 at 09:20
  • 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. – Jithin Raj P R Feb 19 '18 at 09:23
0

In your CSS, remove position: fixed; from media type print. This is causing the footer to appear on every page.

Checkout https://jsfiddle.net/ur6d1h21/12/

agarwalankur85
  • 274
  • 2
  • 9
  • 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. – Jithin Raj P R Feb 19 '18 at 07:08
  • 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 Feb 19 '18 at 07:13
  • Here is the full screen view of the fiddle result. https://fiddle.jshell.net/ur6d1h21/12/show/. Try print preview or enable print emulation from developer tools to check it out. – agarwalankur85 Feb 19 '18 at 07:15
  • Please check the updated **Question** you will get my point bro. :) , sorry for the misunderstanding. – Jithin Raj P R Feb 19 '18 at 07:20
0

I had the same issue with a print stylesheet that has a sticky footer for a page that has a header, and a footer. It works when there is only one page. When the html prints more than one page, the footer remains sticky on each page. The Header should only be on the first page, and the footer should be on the last page. I found a solution here: CSS paged media :last page selector

Digex
  • 1
  • 3
  • 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? – simmer May 05 '20 at 19:48
0

Put the footer after your content and give it a position: absolute; and a bottom: 0; (bottom: 0; is always the bottom of the element's actual page.) Also add a bottom-padding to prevent overlap.

<style>
    .signatures {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 100px;
    }

    .content {
        padding-bottom: 100px;
    }
</style>


<body>
    <div class="content">multi page content</div>
    <div class="signatures">sign here</div>
</body>

Hope this helps!

Dominik Balogh
  • 305
  • 1
  • 3
  • 12
  • For me, this prints the element with class signatures at the bottom of the 1st printed page, not the last. position:fixed prints it on every page, and position:static just prints inline and ignores top, bottom, etc. IT would be great to see a solution that prints this element at the very bottom of the very last printed page – Mustafamond77 Aug 04 '23 at 22:32