Article describes simple formatting technique that allows to create a fixed-position Table Header atop scrollable HTML5 Table rendered by GridView control by using
tr:nth CSS3 property.
Working DEMO demonstrates the practical implementation of proposed solution and other design practices pertinent to HTML5/CSS3 web-page layout.
I've been searching for simple reliable solution to render GridView Header row that stays "like a rock" always atop of the data table regardless of scrolling position. Apparently, I was not alone in my search as numerous traces/leads were found all over web-development blogosphere, pointing to the same set of concerns [1...5]. After Google and multiple try of this/that I did not find anything enough satisfactory: some solutions were plain obsolete and hardly-portable (e.g., using that
- Content in HTML5 elements
- Presentation in CSS3 style
So, I decided to move forward with my own solution, which as projected should be:
- Universally portable between major HTML5-compliant web browsers
- Implemented exclusively using latest HTML5/CSS3 features (no obsolete stuff)
- Be clear, transparent and utmost simple
Multiple "what-if" iterations resulted in solution, demonstrated above and described below.
Using the code
The simple yet powerful idea behind this solution is to literally interpret
position.fixed property in order to "freeze" GridView's Table Header, namely:
position.fixed property to the header row style of GridView control
padding-top to the second table row, setting its value => height of the header
Couple words in regards to GridView HTML rendering: the header row is a first row in corresponding HTML table (
tr) that must be "fixed" atop the rest of other rows. Header row contains
th elements (not
td as the rest of the table) that could be formatted individually as shown later in the article.
In order to apply CSS styling use
CssClass attribute pointing at the corresponding CSS formatting spec. Following code snippets in Listing 1-3 demonstrate the practical implementation of this concept.
Listing 1. Essential part of GridView HTML
<asp:GridView ID="GridView1" runat="server"CssClass="grdCamera">
<HeaderStyle CssClass="headerCamera"</HeaderStyle> ...|rest of GridView code|
CssClass=headerCamera (the name reflects the subject domain of sample DEMO) attributes pointing at the pseudo-classes in the following CSS3 specs (Listing 2).
Listing 2. CSS solution
table.grdCamera tr:nth-child(2) td
CSS3 snippet above actually does the job. Table header will stay "like a rock" during the table content scrolling up and down. Notice
position.fixed applied to header row in CSS style formatting instruction (
padding-top:40px is actually shifting down the content of the first data row in order to compensate for the height of table header row (in other development adjust this particular value correspondingly).
Listing 3. Header Columns (th) formatting using CSS selector
table.grdCamera tr.headerCamera th
padding:5px 0px 5px 0px;
table.grdCamera tr.headerCamera th:nth-child(4)
table.grdCamera tr.headerCamera th:nth-child(3)
table.grdCamera tr.headerCamera th:nth-child(2)
table.grdCamera tr.headerCamera th:first-child
CSS snippet above demonstrates the example of individually formatted GridView table header's column using the
To get the personal user experience with proposed solution, you can try this fully-functional DEMO . It contains lengthy scrollable Table of Top-100 digital cameras, with Table Header atop the GridView data rows. The solution utilizes GridView control included in ASP.NET 3.5 object library and is forward-compatible with other ASP.NET versions. It has been tested in all 4 major web browsers (FF/Chrome/IE9/Safari) and found fully-compatible.
Points of Interest
Position.fixed property is not something new in CSS3; it's been around for pretty long time, but was somehow overlooked. The DEMO page  highlights another interesting use of
Position.fixed that allows creation of interesting effect of "frozen" page area, in this particular case, a
div element containing brief instruction text that stays at the same position regardless of page scrolling.
This solution released on Oct-1-2010 utilizes ASP.NET 3.5 class libraries, and is forward-compatible with other versions ASP.NET.
- The Freeze Pane DataGrid
- A Scrollable GridView with a Fixed Header in .NET
- How to freeze the GridView header in firefox & Chrome
- How to freeze GridView header?
- Scrollable GridView with Fixed Headers in ASP.Net
- Top-100 digital cameras, DEMO table