How to freeze the Top Row Dynamically of a Table Server Control in ASP.NET

Mike Gold
16y
17.8k
0
0

Blog

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:

<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

Up Next