Click here to Skip to main content
Click here to Skip to main content

Fixed Table Header atop scrollable GridView in ASP.NET

, 7 Oct 2012 CPOL
Rate this:
Please Sign up or sign in to vote.
Article describes CSS3 formatting technique that allows to create web Table header, which always stays atop the table regardless of scrollingle
This is an old version of the currently published tip/trick.

Introduction

Article describes simple formatting technique that allows to create a fixed-position Table Header atop scrollable HTML5 Table rendered by GridView control by using position.fixed and tr:nth CSS3 property.

Working DEMO demonstrates the practical implementation of proposed solution and other design practices pertinent to HTML5/CSS3 web-page layout.

Background 

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 expression property) and almost all of them excessively complex considering relatively simple task. Some solutions implement Javascripting, which I don't recommend for page layout design unless it's absolute necessity. Modern web programming paradigm of separation of concerns is to code:

  • Content in HTML5 elements
  • Presentation in CSS3 style
  • Functionality in Javascript/jQuery 

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)
  • Free of any Javascripting pertinent to Table Layout design
  • 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:

  • Apply position.fixed property to the header row style of GridView control
  • Add 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|

Notice CssClass=grdCamera and 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 
/************ GRIDVIEW TABLE ***********/
table.grdCamera
{
    min-width<span class="code-none">:600px<span class="code-none">;
    width<span class="code-none">:50%<span class="code-none">;
<span class="code-none">}
        
<span class="code-comment">/*** TABLE HEADER ***/
div#divCamera table.grdCamera tr.headerCamera
{
    position<span class="code-none">:fixed<span class="code-none">;
    overflow<span class="code-none">:hidden<span class="code-none">;
    white-space<span class="code-none">:nowrap<span class="code-none">;
    width<span class="code-none">:50%<span class="code-none">;
    margin<span class="code-none">:0<span class="code-none">;
   z-index<span class="code-none">:100<span class="code-none">;
<span class="code-none">}

<span class="code-comment">/*padding content of 2nd row (it's 1st data row)*/
table.grdCamera tr:nth-child(2) td
{
    padding-top<span class="code-none">:40px<span class="code-none">;
<span class="code-none">}
</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

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 (tr.headerCamera)

CSS property 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 nth
/*** (OPTIONAL) TABLE HEADER INDIVIDUAL COLUMNS FORMATTING ***/
/*general formatting apply to all header title*/
table.grdCamera tr.headerCamera th
{
    padding<span class="code-none">:5px 0px 5px 0px<span class="code-none">;
    text-align<span class="code-none">:center<span class="code-none">;
<span class="code-none">}       

<span class="code-comment">/*individual formatting of 4th header title*/
table.grdCamera tr.headerCamera th:nth-child(4)
{
    width<span class="code-none">:40%<span class="code-none">;
<span class="code-none">}

<span class="code-comment">/*individual formatting of 3rd header title*/         
table.grdCamera tr.headerCamera th:nth-child(3)
{
    width<span class="code-none">:40%<span class="code-none">;
<span class="code-none">}

<span class="code-comment">/*individual formatting of 2nd header title*/
table.grdCamera tr.headerCamera th:nth-child(2)
{
    width<span class="code-none">:120px<span class="code-none">;
<span class="code-none">}

<span class="code-comment">/*individual formatting of 1st header title*/
table.grdCamera tr.headerCamera th:first-child
{
    width<span class="code-none">:12%<span class="code-none">;
    text-align<span class="code-none">:center<span class="code-none">;
<span class="code-none">}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

CSS snippet above demonstrates the example of individually formatted GridView table header's column using the th:first-child and th:nth-child(N) selector.

To get the personal user experience with proposed solution, you can try this fully-functional DEMO [6]. It contains lengthy scrollable Table of Top-50 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 [6] 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. 

History 

This solution released on Oct-1-2010 utilizes ASP.NET 3.5 class libraries, and is forward-compatible with other versions ASP.NET.

References

  1. The Freeze Pane DataGrid
  2. A Scrollable GridView with a Fixed Header in .NET
  3. How to freeze the GridView header in firefox & Chrome
  4. How to freeze GridView header?
  5. Scrollable GridView with Fixed Headers in ASP.Net
  6. Top-50 digital cameras, DEMO table 

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

DrABELL
President Infosoft International Inc
United States United States
Dr. A. Bell has 20+ years of Software and Electrical Engineering experience: Win/Web veteran published 300+ articles and authored 37 inventions, currently focused on: Windows 7/8, HTML5, CSS3, jQuery, .NET, ASP.NET, WPF, C#, SQL, 'Big Data', AI, Speech Technology and Mobile apps. He participated in App Innovation Contest (AIC 2102/2013) with several winning submissions. Sample pubs follow:
  1. Edumatter M12: School Math Calculators and Equation Solvers (contest winner)
  2. Engineering Calculator VOLTA-2013 (contest winner)
  3. HTML5 Best Practices: Table formatting via CSS3
  4. Engineering Calculator VOLTA-814D
  5. SQL generates large data sequence
  6. Aggregate Product function extends SQL
  7. Watch Your Mouse!
  8. Top-100 Digital Cameras
  9. WebTV Project: Embedded YouTube Player (Goog #1 YouTube API for ASP.NET)
Dr. Bell is personally credited for 10+ Enterprise level projects w/total code base exceeding 250k lines.
Follow on   Twitter

Comments and Discussions


Discussions posted for the Published version of this article. Posting a message here will take you to the publicly available article in order to continue your conversation in public.
 
QuestionNice buddy! PinmemberSing Abend15-Oct-14 8:46 
AnswerRe: Nice buddy! PinprofessionalDrABELL15-Oct-14 11:00 
GeneralGood job Pinmemberxixi031113-Oct-14 13:06 
QuestionGood Job DrABELL PinprofessionalSanthosh Babu Mahimairaj8-Oct-14 1:17 
AnswerRe: Good Job DrABELL PinprofessionalDrABELL8-Oct-14 18:50 
QuestionThank you to share such a valuable information. PinmemberEone James28-Apr-13 21:45 
AnswerRe: Thank you to share such a valuable information. PinprofessionalDrABELL8-Oct-14 18:54 
QuestionTech problem with this solution? PinmemberMember 853761416-Dec-12 20:35 
Questionheaders not on columns PinmemberMember 834559923-Oct-12 3:46 
AnswerRe: headers not on columns PinmemberDrABELL23-Oct-12 4:10 
GeneralRe: headers not on columns PinmemberMember 834559923-Oct-12 6:48 
GeneralRe: headers not on columns PinmemberDrABELL23-Oct-12 7:52 
GeneralRe: headers not on columns PinmemberMember 834559923-Oct-12 11:04 
GeneralRe: headers not on columns PinmemberDrABELL23-Oct-12 11:51 
GeneralRe: headers not on columns PinmemberMember 834559924-Oct-12 9:51 
GeneralRe: headers not on columns PinmemberDrABELL24-Oct-12 13:43 
GeneralRe: headers not on columns PinmemberMember 834559925-Oct-12 9:51 
GeneralRe: headers not on columns PinmemberDrABELL26-Oct-12 12:02 
QuestionGood one PinmemberMr. Tapan Kumar10-Oct-12 10:55 
AnswerRe: Good one PinmemberDrABELL10-Oct-12 11:09 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.1411019.1 | Last Updated 7 Oct 2012
Article Copyright 2012 by DrABELL
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid