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

I have a need to display a large amount of data in a small space. I have a header and footer with column names and the data in a "content" div. I would like to "freeze" the header and footer to allow horizontal scrolling of the entire table but keep the vertical scroll bars of the content div visible at all times, despite the horizontal scroll position on the wrapper.

Is this possible? Would I need to dig into something like jQuery to accomplish this?

HTML:

<div id="wrapper">
    <div id="header">Header</div>
    <div id="content"&开发者_JAVA百科gt;
        <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 your markup a 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; 

You could accomplish this easily by setting their position property to be: position: fixed, which functions like absolute positioning, but relative to the viewport, not the page, meaning that they will not move with scrolling of the rest of the page.

#header{
    position: fixed;
    top: 0;
}
#footer{
    position: fixed;
    bottom: 0;
}

EDIT: As the above doesn't work out, as pointed out in comments, due to the wrapper div, I believe that the best way to do it would be with javascript, and absolute positioning - I'm not sure there's an HTML/CSS-only way to do it. You'd just update the CSS above to read position: absolute, and modify the top/bottom values based on the viewport location.