Setting a max height on a table

Question

I am trying to design a page where there are some tables. It seems that styling tables is much more painful than it ought to be.

The problem is the following: The ta

Answer 1

• Set display: block; for the table
• Set position: sticky; top: 0; for the header row

  

    

      
Header stays put
      
Layout aligned
    
  
  

    

      
foo1
      
Header stays put
    
    

      
foo2
      
Header stays put
    
  

https://jsfiddle.net/0zxk18fp/

Tested on Chrome, Firefox, Safari, Edge