CODEWITHSUNDEEP
htmlcss
Dave Nottage
Dave Nottage

Reputation: 3602

Fix table footer to the bottom of the page while keeping the columns the correct size

Example html:

<html>
  <style>
    .footer-fixed { 
      position: fixed; 
      bottom: 0px; left: 20px;
      width: calc(100% - 40px); 
    }
  </style>
  <table>
    <thead>
      <tr>
        <th colspan="2"></th>
        <th class="border-left text-center" colspan="2">Full Example 20'</th>
        <th class="border-left text-center" colspan="2">Full Example 40'</th>
        <th class="border-left text-center" colspan="2">Total Full Examples TEU</th>
        <th class="border-left text-center" colspan="2">Full Something 20'</th>
        <th class="border-left text-center" colspan="2">Full Something 40'</th>
        <th class="border-left text-center" colspan="2">Total Full Something TEU</th>
        <th class="border-left text-center" colspan="2">Total Full Eg/Some 20'</th>
        <th class="border-left text-center" colspan="2">Total Full Eg/Some 40'</th>
        <th class="border-left text-center" colspan="2">Total Full Eg/Some XYZ</th>
      </tr>
      <tr>
        <th>Report D/T</th>
        <th>Equipment</th>
        <th class="border-left">OTHER THING</th>
        <th class="border-left">Something</th>
        <th class="border-left">OTHER THING</th>
        <th class="border-left">Something</th>
        <th class="border-left">OTHER THING</th>
        <th class="border-left">Something</th>
        <th class="border-left">OTHER THING</th>
        <th class="border-left">Something</th>
        <th class="border-left">OTHER THING</th>
        <th class="border-left">Something</th>
        <th class="border-left">OTHER THING</th>
        <th class="border-left">Something</th>
        <th class="border-left">OTHER THING</th>
        <th class="border-left">Something</th>
        <th class="border-left">OTHER THING</th>
        <th class="border-left">Something</th>
        <th class="border-left">OTHER THING</th>
        <th class="border-left">Something</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="text-left">Fri 01-Feb-19 (00:00)</td>
        <td class="text-left">Feb.2019</td>
        <td class="text-left border-left"></td>
        <td class="text-left">16,131</td>
        <td class="text-left"></td>
        <td class="text-left">13,889</td>
        <td class="text-left border-left"></td>
        <td class="text-left">43,909</td>
        <td class="text-left border-left"></td>
        <td class="text-left">20,474</td>
        <td class="text-left"></td>
        <td class="text-left">14,334</td>
        <td class="text-left border-left"></td>
        <td class="text-left">49,142</td>
        <td class="text-left border-left"></td>
        <td class="text-left">36,605</td>
        <td class="text-left"></td>
        <td class="text-left">28,223</td>
        <td class="text-left border-left"></td>
        <td class="text-left">93,051</td>
      </tr>
      <tr>
        <td class="text-left">Tue 01-Jan-19 (00:00)</td>
        <td class="text-left">Jan.2019</td>
        <td class="text-left border-left"></td>
        <td class="text-left">16,131</td>
        <td class="text-left"></td>
        <td class="text-left">13,889</td>
        <td class="text-left border-left"></td>
        <td class="text-left">43,909</td>
        <td class="text-left border-left"></td>
        <td class="text-left">20,474</td>
        <td class="text-left"></td>
        <td class="text-left">14,334</td>
        <td class="text-left border-left"></td>
        <td class="text-left">49,142</td>
        <td class="text-left border-left"></td>
        <td class="text-left">36,605</td>
        <td class="text-left"></td>
        <td class="text-left">28,223</td>
        <td class="text-left border-left"></td>
        <td class="text-left">93,051</td>
      </tr>
      <tr>
        <td class="text-left">Sat 01-Dec-18 (00:00)</td>
        <td class="text-left">Dec.2018</td>
        <td class="text-left border-left"></td>
        <td class="text-left">16,131</td>
        <td class="text-left"></td>
        <td class="text-left">13,889</td>
        <td class="text-left border-left"></td>
        <td class="text-left">43,909</td>
        <td class="text-left border-left"></td>
        <td class="text-left">20,474</td>
        <td class="text-left"></td>
        <td class="text-left">14,334</td>
        <td class="text-left border-left"></td>
        <td class="text-left">49,142</td>
        <td class="text-left border-left"></td>
        <td class="text-left">36,605</td>
        <td class="text-left"></td>
        <td class="text-left">28,223</td>
        <td class="text-left border-left"></td>
        <td class="text-left">93,051</td>
      </tr>
      <tr>
        <td class="text-left">Thu 01-Nov-18 (00:00)</td>
        <td class="text-left">Nov.2018</td>
        <td class="text-left border-left"></td>
        <td class="text-left">16,131</td>
        <td class="text-left"></td>
        <td class="text-left">13,889</td>
        <td class="text-left border-left"></td>
        <td class="text-left">43,909</td>
        <td class="text-left border-left"></td>
        <td class="text-left">20,474</td>
        <td class="text-left"></td>
        <td class="text-left">14,334</td>
        <td class="text-left border-left"></td>
        <td class="text-left">49,142</td>
        <td class="text-left border-left"></td>
        <td class="text-left">36,605</td>
        <td class="text-left"></td>
        <td class="text-left">28,223</td>
        <td class="text-left border-left"></td>
        <td class="text-left">93,051</td>
      </tr>
      <tr>
        <td class="text-left">Mon 01-Oct-18 (00:00)</td>
        <td class="text-left">Oct.2018</td>
        <td class="text-left border-left"></td>
        <td class="text-left">16,131</td>
        <td class="text-left"></td>
        <td class="text-left">13,889</td>
        <td class="text-left border-left"></td>
        <td class="text-left">43,909</td>
        <td class="text-left border-left"></td>
        <td class="text-left">20,474</td>
        <td class="text-left"></td>
        <td class="text-left">14,334</td>
        <td class="text-left border-left"></td>
        <td class="text-left">49,142</td>
        <td class="text-left border-left"></td>
        <td class="text-left">36,605</td>
        <td class="text-left"></td>
        <td class="text-left">28,223</td>
        <td class="text-left border-left"></td>
        <td class="text-left">93,051</td>
      </tr>
    </tbody>
    <tfoot class="footer-fixed">
      <tr>
        <td colspan="2"><span>Totals:</span></td>
        <td><span></span></td>
        <td><span>145,179</span></td>
        <td><span></span></td>
        <td><span>125,001</span></td>
        <td><span></span></td>
        <td><span>395,181</span></td>
        <td><span></span></td>
        <td><span>184,266</span></td>
        <td><span></span></td>
        <td><span>129,006</span></td>
        <td><span></span></td>
        <td><span>442,278</span></td>
        <td><span></span></td>
        <td><span>329,445</span></td>
        <td><span></span></td>
        <td><span>254,007</span></td>
        <td><span></span></td>
        <td><span>837,459</span></td>
      </tr>
    </tfoot>
  </table>
</html>

(please ignore the classes that don't appear in the style tag)

When the footer-fixed class is not applied, the footer columns match with the rest of the table. What might be the easiest way of making them line up when footer-fixed is applied?

Upvotes: 0

Views: 2122

Answers (1)

gengns
gengns

Reputation: 1643

If I understood you well, you can use CSS Grid for that. Make your head and foot fixed and the body scrollable with the height you want to.

table {
  display: inline-grid;
  grid-template-areas: 
  "head-fixed" 
  "body-scrollable" 
  "foot-fixed";
}

thead {
  grid-area: head-fixed;
}

tbody {
  grid-area: body-scrollable;
  overflow: auto;
  height: calc(100vh - 100px);
}

tfoot {
  grid-area: foot-fixed;
}

th, td {
  min-width: 80px;
}

https://jsfiddle.net/5zy9ujd3/ (play resizing the result area to check if that's what you're looking for)

Hope this help :)

Upvotes: 3

Related Questions