In my current consulting project, I needed to create a control that would allow me to scroll the rows but keep the top row frozen. Admittedly, this created quite a challenge.
I finally found an article that lead me in the right direction
http://web.tampabay.rr.com/bmerkey/examples/locked-column-csv.html
In order to lock the header of a table server control. Create a style sheet with the following style for your td tag:
td.locked
, th.locked{
border-right: 1px solid silver;
left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft); /* IE5+ only */
position
: relative;
z-index: 10;
background-color:#ACCBE0;
border-color:#D3E0EA;
}
Reference your style sheet in your page's header:
<
head runat="server">
<link rel="stylesheet" href="../App_Themes/LockingHeaderRow.css" type="text/css" title="" />
<title>Master Page</title>
</head>
The table must be initially inside a div tag to scroll:
<
div id="persistMe" runat="server" style="width:1000px; height:300px; overflow:auto; z-index:55" >
<asp:Table ID="Table1" runat="server" GridLines="Both" EnableViewState="false" BorderStyle="Solid" BorderWidth="1" Width="1000px" >
<
asp:TableRow ID="TableRow2" runat="server" BackColor="White" BorderWidth="1px"><asp:TableCell ID="TableCell25" runat="server"></asp:TableCell><asp:TableCell ID="TableCell28" runat="server">7:00</asp:TableCell><asp:TableCell ID="TableCell29" runat="server">8:00</asp:TableCell><asp:TableCell ID="TableCell30" runat="server">9:00</asp:TableCell><asp:TableCell ID="TableCell31" </asp:Table>
</div>
When you are dynamically creating or updating the table, set the style of all the cells in the row to the "locked" style class.
TableCell cornerCell = new TableCell();
cornerCell.ID = "CornerCell";
cornerCell.BackColor = Color.LightGray;
cornerCell.Width = 55;
cornerCell.CssClass = "locked";
Notes and Comments:
- There may be a way to do this with the THead tag, but I haven't figured it out. Also, you can use this technique for the GridView as well, by accessing the table underlying the GridView.
- I'm not sure if this works for FireFox (I suspect it doesn't)
- If you have a horizontal scroll bar in your div, it will throw the header off because the header is locked
Please feel free to post any comments if you have other suggestions