Test Table footer for print

by Jithin Raj P R

HTML

<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>
    <tr>
      <td>three</td>
      <td>three test</td>
    </tr>
    <tr>
      <td>three</td>
      <td>three test</td>
    </tr>
    <tr>
      <td>three</td>
      <td>three test</td>
    </tr>
    <tr>
      <td>three</td>
      <td>three test</td>
    </tr>
    <tr>
      <td>three</td>
      <td>three test</td>
    </tr>
    <tr>
      <td>three</td>
      <td>three test</td>
    </tr>
    <tr>
      <td>three</td>
      <td>three test</td>
    </tr>
    <tr>
      <td>three</td>
      <td>three test</td>
    </tr>
    <tr>
      <td>three</td>
      <td>three test</td>
    </tr>
    <tr>
      <td>three</td>
      <td>three test</td>
    </tr>
    <tr>
      <td>three</td>
      <td>three test</td>
    </tr>
    <tr>
      <td>three</td>
      <td>three test</td>
    </tr>
    <tr>
      <td>three</td>
      <td>three test</td>
    </tr>
    <tr>
      <td>three</td>
      <td>three test</td>
    </tr>
    <tr>
      <td>three</td>
      <td>three test</td>
    </tr>
    <tr>
      <td>three</td>
      <td>three test</td>
    </tr>
    <tr>
      <td>three</td>
      <td>three test</td>
    </tr>
    <tr>
      <td>three</td>
      <td>three test</td>
    </tr>
    <tr>
      <td>three</td>
      <td>three test</td>
    </tr>
    <tr>
      <td>three</td>
      <td>three test</td>
    </tr>
    <tr>
      <td>three</td>
      <td>three test</td>
    </tr>
    <tr>
      <td>three</td>
      <td>three test</td>
    </tr>
    <tr>
      <td>three</td>
      <td>three test</td>
    </tr>
    <tr>
      <td>three</td>
      <td>three test</td>
    </tr>
    <tr>
      <td>three</td>
      <td>three test</td>
    </tr>
    <tr>
      <td>three</td>
      <td>three test</td>
    </tr>
    <tr>
      <td>three</td>
      <td>three test</td>
...

CSS

div {
      position: relative;
      min-height: 500px;
      padding-bottom: 100px;
    }
    
    .table-blue {
      width: 100%;
      background: lightblue;
    }
    
    .table-blue td {
      padding: 5px 10px;
    }
    
    .table-blue-fotter {
      position: absolute;
      bottom: 0px;
      left: 0px;
      width: 100%;
      background: gray;
    }
    
    @media print {
      .table-blue-fotter {
        position: fixed;
        bottom: 20px;
        left: 0px;
        width: 100%;
        background: gray;
      }