Table - fixed header, scrollable body, most robust/simple solution? [duplicate]

Answer 1

  
Column 1
  
Column 2




  

  

    
Value 1
    
Value 2
  
  

    
Value 1
    
Value 2
  
  

    
Value 1
    
Value 2
  
  

    
Value 1
    
Value 2
  
  

    
Value 1
    
Value 2
  
  

    
Value 1
    
Value 2
  
  

This creates a fixed column header with the scrollable table below it. The trick is to embed the table you want to scroll in a tag with the overflow attribute set to auto. This will force the browser to display a scrollbar when the contents of the inner table are larger than the height of the surrounding .

The width of the outer must be larger than the width if the inner table to accommodate for the scrollbar. This may be difficult to get exactly right, because some users may have set their scrollbars to be wider or smaller than the default. However, with a difference of around 20 to 30 pixels you'll usually be able to display the scrollbar just fine.

CSS-Tricks also talks about using JavaScript and CSS to help with this as well so you can use highlighting. Here is the link to that article.