html - Freeze header and footer but with vertical both scroll bars on content visible always -

i have need display large amount of data in small space. have header , footer column names , data in "content" div. "freeze" header , footer allow horizontal scrolling of entire table keep vertical scroll bars of content div visible @ times, despite horizontal scroll position on wrapper.

is possible? need dig jquery accomplish this?

html:

<div id="wrapper">     <div id="header">header</div>     <div id="content">         <div id="row">row</div>         <div id="alt">alt</div>         <div id="row">row</div>         <div id="alt">alt</div>         <div id="row">row</div>         <div id="alt">alt</div>         <div id="row">row</div>         <div id="alt">alt</div>         <div id="row">row</div>         <div id="alt">alt</div>         <div id="row">row</div>         <div id="alt">alt</div>         <div id="row">row</div>         <div id="alt">alt</div>         <div id="row">row</div>         <div id="alt">alt</div>         <div id="row">row</div>         <div id="alt">alt</div>         <div id="row">row</div>         <div id="alt">alt</div>     </div>     <div id="footer">footer</div> </div> 

css:

/* layout */ #header, #content, #footer { width: 900px; } #content { height: 200px; overflow-y: auto; } #wrapper { width: 400px; overflow-x: auto; }  /* visual */ #row { background-color: #eee; } #alt { background-color: #aaa; } #header, #footer { border: solid 1px #000; font-weight: 700; } #row, #alt { padding: 1px; } 

fiddle: http://jsfiddle.net/vuxur/3/

i have changed markup little bit: http://jsfiddle.net/teddyrised/vuxur/6/

html:

<div id="wrapper">     <div id="header">header</div>     <div id="content">         <div>             <div>row</div>             <div>alt</div>             <div>row</div>             <div>alt</div>             <div>row</div>             <div>alt</div>             <div>row</div>             <div>alt</div>             <div>row</div>             <div>alt</div>             <div>row</div>             <div>alt</div>             <div>row</div>             <div>alt</div>             <div>row</div>             <div>alt</div>             <div>row</div>             <div>alt</div>             <div>row</div>             <div>alt</div>         </div>     </div>     <div id="footer">footer</div> </div> 

css:

/* layout */ #header, #content > div, #footer { width: 900px; } #content { height: 200px; width: 400px; overflow-y: auto; } #content > div { overflow-x: auto; } #wrapper { width: 400px; border: 1px solid #000; overflow: hidden; }  /* visual */ #content > div > div:nth-child(2n-1) { background-color: #eee; } #content > div > div:nth-child(2n) { background-color: #aaa; } #header, #footer { border: solid 1px #000; font-weight: 700; } #row, #alt { padding: 1px;