title: Fixed Sticky footer for PRINT only for last page
body: <p>What I have is a <code>&lt;table&gt;</code> it can be <strong>big</strong> or <strong>small</strong> sometimes only on one page and sometimes it can grow to be 10 pages and so.</p>
  
  <p>Here is a sample code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
  &lt;table class="table-blue"&gt;
    &lt;tr&gt;
      &lt;td&gt;one&lt;/td&gt;
      &lt;td&gt;one test&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;two&lt;/td&gt;
      &lt;td&gt;two test&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;three&lt;/td&gt;
      &lt;td&gt;three test&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;table class="table-blue-fotter"&gt;
    &lt;tr&gt;
      &lt;td&gt;one&lt;/td&gt;
      &lt;td&gt;one test&lt;/td&gt;
      &lt;td&gt;one test&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;two&lt;/td&gt;
      &lt;td&gt;two test&lt;/td&gt;
      &lt;td&gt;one test&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;three&lt;/td&gt;
      &lt;td&gt;three test&lt;/td&gt;
      &lt;td&gt;one test&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsfiddle.net/jithinrajpr7/6zbqqcj3/" rel="noreferrer"><strong>Fiddle for property inspection</strong></a> - this workes good for me. But if the table gets long the story will change to <a href="https://jsfiddle.net/jithinrajpr7/ur6d1h21/" rel="noreferrer"><strong>this</strong></a>.</p>
  
  <p>In the second view when the first <code>&lt;table&gt;</code> gets long, in the <strong><em>print view</em></strong> the footer appears on every page.</p>
  
  <p>So what I want is to the <code>.table-blue-fotter</code> to appear only on the last page of the print view in the page bottom edge no matter the content height is.</p>
  
  <p><a href="https://i.stack.imgur.com/Wh9s0.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Wh9s0.png" alt="enter image description here"></a></p>
  
  <p>only on <strong>Last page</strong></p>
  
  <p>Hopping for a <code>CSS</code> fix.</p>