Question

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">
        <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/

Answer 1

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;