Fixed header and scrollable body

Question

I have like 15 columns in the table. I want to scroll both horizontal and vertical and header should be fixed when I scroll vertical. I have tried various examples but no

Answer 1

I have created a pure CSS solution to this problem that may work better for some people than the accepted answer (which I can't seem to get working at all). Unlike most of the other scrolling-body tables I've seen that don't require fixed widths, mine has a minimum width that is determined by its content. It will wrap text if possible to avoid overflowing its container (except in the headers, which don't allow soft-wrapping, unfortunately), but once the wrapping opportunities are used up, it won't get any narrower. That forces the parent element (usually the body tag) to handle the horizontal scrolling, which keeps the headers and columns in sync.

Here's a fiddle.

Here's the code:

HTML

  

    

      

        
Top Caption
        

          

            

            

            

            

              
              
Column 4
Column 4
            
            
 
          
        
        

          
Lorem ipsum
Dolor
Sit
Amet consectetur
          
Lorem ipsum
Dolor
Sit
Amet consectetur
          
Lorem ipsum
Dolor
Sit
Amet consectetur
          
Lorem ipsum
Dolor
Sit
Amet consectetur
          
Lorem ipsum
Dolor
Sit
Amet consectetur
          
Lorem ipsum
Dolor
Sit
Amet consectetur
          
Lorem ipsum
Dolor
Sit
Amet consectetur
          
Lorem ipsum
Dolor
Sit
Amet consectetur
          
Lorem ipsum
Dolor
Sit
Amet consectetur
          
Lorem ipsum
Dolor
Sit
Amet consectetur
          
Lorem ipsum
Dolor
Sit
Amet consectetur
          
Lorem ipsum
Dolor
Sit
Amet consectetur
        
      
    
    Faux bottom caption
  

---

CSS