Click here to Skip to main content
15,867,308 members
Articles / Web Development / HTML5
Tip/Trick

Fixed Table Header Atop Scrollable GridView in ASP.NET

Rate me:
Please Sign up or sign in to vote.
4.72/5 (13 votes)
26 Feb 2015CPOL3 min read 157.2K   40   26
Tip describes CSS3 formatting technique that allows to create web Table header, which always stays atop the table regardless of scrolling

Introduction

Simple formatting technique allows creating a fixed-position Table Header atop any scrollable HTML5 Table rendered by GridView control by using position.fixed and tr:nth CSS3 property. Working DEMO shown below demonstrates the practical implementation of the proposed solution and other design practices pertinent to HTML5/CSS3 web-page layout.

Pure HTML5/CSS3 Solution

The sample Table with fixed header is generated by ASP.NET GridView control, allowing scrolling the content top-down while keeping its header "frozen" at the same position (it also contains sortable columns - another feature readily available in GridView control). The solution is implemented using pure HTML5/CSS3 features - no JavaScript.

Image 1

Fig.1 GridView Table with fixed header and scrollable content, sample screenshot

Background

I've been searching for a 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 tip.

In order to apply CSS styling, use CssClass attribute pointing at the corresponding CSS formatting spec. The following code snippets in Listing 1-3 demonstrate the practical implementation of this concept.

Listing 1. Essential part of GridView HTML
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
CSS
/**** GridView TABLE (grdCamera) *******/
table.grdCamera
{
    /* table width */
    min-width:600px;
    width:50%;
}
        
/****TABLE HEADER (headerCamera) *******/
table.grdCamera tr.headerCamera
{
    position:fixed;
    overflow:hidden;
    white-space:nowrap;
    width:50%;
    margin:0;
    z-index:100;
}

/*padding content of 2nd row (it's the 1st data row)*/
table.grdCamera tr:nth-child(2) td
{
    padding-top:40px;
}

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
CSS
/*general formatting applied to all header columns*/
table.grdCamera tr.headerCamera th
{
    padding:5px 0px 5px 0px;
    text-align:center;
}       

/*individual formatting of 4th header column*/
table.grdCamera tr.headerCamera th:nth-child(4)
{
    width:40%;
}

/*individual formatting of 3rd header column*/         
table.grdCamera tr.headerCamera th:nth-child(3)
{
    width:40%;
}

/*individual formatting of 2nd header column*/
table.grdCamera tr.headerCamera th:nth-child(2)
{
    width:120px;
}

/*individual formatting of 1st header column*/
table.grdCamera tr.headerCamera th:first-child
{
    width:12%;
    text-align:center;
}

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.

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

License

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


Written By
Engineer
United States United States
Dr. Alexander Bell (aka DrABell), a seasoned full-stack Software (Win/Web/Mobile) and Data Engineer holds PhD in Electrical and Computer Engineering, authored 37 inventions and published 100+ technical articles and developed multiple award-winning apps (App Innovation Contests AIC 2012/2013 submissions) Alexander is currently focused on Microsoft Azure Cloud and .NET 6/8 development projects.

  1. HTML5/CSS3 graphic enhancement: buttons, inputs
  2. HTML5 Tables Formatting: Alternate Rows, Color Gradients, Shadows
  3. Azure web app: Engineering Calculator VOLTMATTER
  4. Azure: NYC real-time bus tracking app
  5. Quiz Engine powered by Azure cloud
  6. 'enRoute': Real-time NY City Bus Tracking Web App
  7. Advanced CSS3 Styling of HTML5 SELECT Element
  8. Aggregate Product function extends SQL
  9. YouTube™ API for ASP.NET

Comments and Discussions

 
QuestionGreat solution, it was useful Pin
Member 1235752414-Oct-20 14:05
Member 1235752414-Oct-20 14:05 
QuestionCSS grid headers Pin
chessdr18-Feb-15 4:02
chessdr18-Feb-15 4:02 
AnswerRe: CSS grid headers Pin
DrABELL18-Feb-15 4:57
DrABELL18-Feb-15 4:57 
GeneralRe: CSS grid headers Pin
chessdr19-Feb-15 11:46
chessdr19-Feb-15 11:46 
GeneralRe: CSS grid headers Pin
DrABELL19-Feb-15 12:22
DrABELL19-Feb-15 12:22 
QuestionImplementation steps? Pin
Sheeraz Raza16-Dec-14 8:42
Sheeraz Raza16-Dec-14 8:42 
QuestionNice buddy! Pin
Sing Abend15-Oct-14 7:46
professionalSing Abend15-Oct-14 7:46 
AnswerRe: Nice buddy! Pin
DrABELL15-Oct-14 10:00
DrABELL15-Oct-14 10:00 
GeneralGood job Pin
xixi031113-Oct-14 12:06
xixi031113-Oct-14 12:06 
QuestionGood Job DrABELL Pin
Santhosh Babu Mahimairaj8-Oct-14 0:17
professionalSanthosh Babu Mahimairaj8-Oct-14 0:17 
AnswerRe: Good Job DrABELL Pin
DrABELL8-Oct-14 17:50
DrABELL8-Oct-14 17:50 
QuestionThank you to share such a valuable information. Pin
Eone James28-Apr-13 20:45
Eone James28-Apr-13 20:45 
AnswerRe: Thank you to share such a valuable information. Pin
DrABELL8-Oct-14 17:54
DrABELL8-Oct-14 17:54 
QuestionTech problem with this solution? Pin
Member 853761416-Dec-12 19:35
Member 853761416-Dec-12 19:35 
Questionheaders not on columns Pin
Member 834559923-Oct-12 2:46
Member 834559923-Oct-12 2:46 
AnswerRe: headers not on columns Pin
DrABELL23-Oct-12 3:10
DrABELL23-Oct-12 3:10 
GeneralRe: headers not on columns Pin
Member 834559923-Oct-12 5:48
Member 834559923-Oct-12 5:48 
GeneralRe: headers not on columns Pin
DrABELL23-Oct-12 6:52
DrABELL23-Oct-12 6:52 
GeneralRe: headers not on columns Pin
Member 834559923-Oct-12 10:04
Member 834559923-Oct-12 10:04 
GeneralRe: headers not on columns Pin
DrABELL23-Oct-12 10:51
DrABELL23-Oct-12 10:51 
GeneralRe: headers not on columns Pin
Member 834559924-Oct-12 8:51
Member 834559924-Oct-12 8:51 
GeneralRe: headers not on columns Pin
DrABELL24-Oct-12 12:43
DrABELL24-Oct-12 12:43 
GeneralRe: headers not on columns Pin
Member 834559925-Oct-12 8:51
Member 834559925-Oct-12 8:51 
GeneralRe: headers not on columns Pin
DrABELL26-Oct-12 11:02
DrABELL26-Oct-12 11:02 
QuestionGood one Pin
Mr. Tapan Kumar10-Oct-12 9:55
Mr. Tapan Kumar10-Oct-12 9:55 

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

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