Is there a css3 way to fix a on the y-axis, let it scroll on the x-axis?

Question

This has been asked a zillion times: here, there, and the other place just on SO. Yet there\'s no real good answer that I can find.

Often I have tables

Answer 1

a dirty way would be to put the header table in a separate div like:

    
#
v

Then body in the another div like:

    

        

            
1
a
            
1
a
            
1
a
            
1
a
            
1
a
         
    
 

Now you can give a fixed height to body div and set oveflow to auto. like:

table{border:0px solid #ccc;height:30px;}
table tr td{border:1px solid #ccc;padding:5px;}
div.body{height:70px;overflow:auto;border-bottom:1px solid #ccc;}

here is a working example I did in jsfiddle