Scrollable Repeater with fixed Header in both IE and Firefox

2008-05-13T15:27:00.001-07:00

I had to do a scrollable repeater for work these days and it took me quite some time until I realised what to do in order for the reapeter to be the way I want it.

I found many examples, some of them worked in IE, others in FF.

This example I managed to make, works only for IE if you forget to replace what you already have in your page with this:
<!DOCTYPE HTML ePUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

So, you put in th page an empty div and under it you draw the repeater inside a div tag that has overflow :

<div id="tableHeader"></div>
<div style="overflow: scroll; height:500px; width:500px">
<div>
<asp:Repeater ID="myReapeter" runat="server">
<HeaderTemplate>
<table id="table" width="500" style="table-layout:fixed;">
<thead>
<tr id="thead" style=" width: 500px; top: 12px;table-layout:fixed;">
<th class="txt" style="padding-left: 10px;background-color: #dedede;">
Name</th>
<th class="txt" style="padding-left: 10px;background-color: #dedede;">
Group</th>
<th class="txt" style="padding-left: 10px;background-color: #dedede;">
Description</th>
</tr>
</thead>
</HeaderTemplate>
<ItemTemplate>
...
</div>

Don' forget to add style to the table, particullary table-layout:fixed;
You must have these tags also because we are going to use them :<thead></thead>

Inside the <ItemTemplate> Tags you draw the content you get from the database.

The Table Header will stay outside the div with overflow:scroll if you use this little javascript code:

<script type="text/javascript">
function fixHeader()
{
var t = document.getElementById("table");
var thead = t.getElementsByTagName("thead")[0];
var t1 = t.cloneNode(false);
t1.appendChild(thead);
tableHeader.appendChild(t1)
}
window.onload = fixHeader
</script>

Asp.Net Examples

Scrollable Repeater with fixed Header in both IE and Firefox