Static Header Demo

This is an example of how to make static headers with the Display Tag Library in both Internet Explorer and Mozilla.

Mozilla

In Mozilla, it's easy. Just add the following to your stylesheet:

    tbody {width: 100%; height: 200px}

To do this on the table below (with JavaScript), click here. Click here to view the JavaScript.

    // get the tbody of the table and set it's style programmatically
    var tbody = table.getElementsByTagName("tbody")[0];
    tbody.style.height="200px";
    tbody.style.overflow="auto";  

Internet Explorer

Now for the hard part - doing it in IE (it actually works in Mozilla too). This example uses JavaScript to close the first table that contains the header, add a <div> and then start a new table. The major problem with this approach is getting the width of the top (header) cells to match up with the bottom (data) cells.

To do this on the table below (with JavaScript), click here. Click here to view the JavaScript.

    // body of the page, for appending the <div> to separate the tables
    var body = document.getElementsByTagName("body")[0];
    // get the table
    var table = document.getElementsByTagName("table")[0];
    // get the tbody of the table and set it's style programmatically
    var tbody = document.getElementsByTagName("tbody")[0];
    // remove the tbody - we'll add it back in later
    table.removeChild(tbody);
    // create a new div
    var div = document.createElement("div");
    // set the CSS class name
    div.className="tableBody";
    // create a title to hold the data (tbody)
    var table2 = document.createElement("table");
    table2.appendChild(tbody);
    div.appendChild(table2);
    body.appendChild(div);

WARNING: I put no logic in to detect if you've clicked on IE or Mozilla - and to reset between clicks. Refresh the page to try again.