css - Full Height HTML table with only a few rows

Question

I'm trying to build a table component that has a fixed header, a scrollable body and a fixed footer that will remain on the bottom of a container. The trick is, the table should occupy the full height of the outer container and the footer should be placed in the bottom of the same container.

Below is a screenshot:

As you can see, although my table only has 2 rows, its columns occupies the full container height (a blank space pushes the footer to the bottom). Is it something possible with only a HTML table or it would require some more advanced CSS tricks using divs and flex and grid?? I'm thinking it is not possible because of the vertical borders.

Thanks

question from:https://stackoverflow.com/questions/65947645/full-height-html-table-with-only-a-few-rows

Answer 1

Waitting for answers