header and footer fixed, content scrollable

I created this fiddle to show where my problem is. What I want is to have a fixed header position and a fixed footer position in a 320*480 screen.

The content should be scrollable so 开发者_如何学Pythonthat the set width and height will not be changing.

Thanks.

---

http://jsfiddle.net/vJGua/13/

You just need your "content" div to have a height and overflow: auto; set in the style.

---

I worked with a similar issue for awhile, but had browser compatibility issues. I finally ended up writing jQuery to split the header rows into a separate table, then matching up the column widths. The end result is two tables that appear to be one, where the content is scrollable, and the header is fixed. This isn't as elegant as I would like it to be, but it seems to have pretty good cross-browser compatibility.

My Markup

<table id="MyHeader"></table>

<div style="overflow-y: auto; height: 330px;">

  <table id="MyDataRows">

    <thead>
      <tr class="grid_header">
        <th>Col1</th>
        <th>Col2</th>
        <th>Col3</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
    </tbody>
  </table>

</div>

My jQuery

<script type="text/javascript">// <![CDATA[
$(function () {
    /* move the table header from the datagrid outside, so it doesn't scroll" */
    $("#MyHeader").append($("#StudentData thead"));
    $("#MyDataRows").css("margin-bottom", "0");

    var ths = $("#MyHeader th");
    var tds = $("#MyDataRows tr:first td");

    /* Reset the padding of the th's to match the td's */
    ths.css("padding-left", tds.first().css("padding-left"));
    ths.css("padding-right", tds.first().css("padding-right"));

    /* Set the widths of all the th's (except the last to acccount for scroll bar) to the corresponding td width */
    for (var i = 0; i < tds.length - 1; i++) {
        ths.eq(i).width(tds.eq(i).width());
    }
});

This could be easily adapted for both a header and a footer.

For a full explanation, see my following post here: Scrollable DataGrid table with Fixed Header with jQuery

---

Set content div height and width; overflow: scroll;