Alternate Rows in ASP.NET GridView, HTML5 Tables

Introduction

Formatting GridView control as well as any other ASP.NET data-bound controls like DetailsView, FormView, which are quintessential in data-centric web applications, could be performed in a rather simple way by using novel CSS3 features tr:nth-child(odd) and tr:nth-child(even) in order to apply different styles to the odd/even rows (see the following code snippet included in Listing 1):

Suggested technique utilizes exclusively CSS3 features, thus it does not require any server coding or client scripting. The solution is rather universal, applicable to any HTML 5 Table element, either dynamically generated on the server side (such as GridView, DetailView, FormView controls pertinent to ASP.NET) or added to the web page as a static HTML element at design time.

Further enhancements could be achieved via "good old" tr:hover CSS styling added to table rows (tr). In addition to this, the element selectors tr:first-child and tr:last-child could could be used to apply a separate styling to the first/last rows of the Table element.

Demo

A working demo is available at Embedded YouTube Player[^] with attaches a playlist implemented as CSS3-enhanced ASP.NET GridView control (note: web query parameter ?idx=2 specifies the ordinal position of the item to play).

Listing 1

/* Table odd rows style */
tr:nth-child(odd) 
{
   background-color: #ffffff;
}
/* Table even rows style */
tr:nth-child(even) 
{
   background-color: #efefef;
}
/* Table hover style */
tr:hover 
{
   background-color: #dadada;
   color: #000;
}

In this simple example, odd table rows differ from even ones just by the background-color attribute; any other formatting features (font attributes, borders, etc.) could be added to make them more visually distinctive. The same consideration applies to the hover CSS styling.

Entire solution

The entire solution, encapsulated in a single HTML file, is shown below:

<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>ALTERNATE TABLE ROWS | HTML5, CSS3</title>
 
    <style type="text/css">
        thead{  font-weight:bold; }
        
        /* Table odd rows style */
        div.AltRow tr:nth-child(odd) {
           background-color: #ffffff;
        }
        
        /* Table even rows style */
        div.AltRow tr:nth-child(even) {
           background-color: #efefef;
        }
        
        /* Table hover style */
        div.AltRow tr:hover {
           background-color: #dadada;
        }
    </style>
 
</head>
<body>
 
    <h2>DEMO TABLE: This Table included in div with class="AltRow" (see CSS) implements Alternate Rows effect</h2>
 
    <h3>Annualised Inflation Rate for the first decade of XXI Century in NY City</h3>
    <h3>(re: <a href="http://exm.nr/Inf2010" 
      target="_blank">New York City, a decade of inflation: the outspoken numbers</a>)</h3>
    <div class="AltRow">
        <table>
            <tr>
             <td>Product</td><td>Inflation Rate</td><td>Note</td>
            </tr>
            <tr>
            <td>Coke® Inflation Index</td><td>7.23%</td><td>Yeah, it's now about 2 bucks for the bottle</td>
            </tr>
            <tr>
            <td>Gas Inflation Index</td><td>6.94%</td><td>Such a pain at the pump, dude...</td>
 
            </tr>
            <tr>
            <td>NY subway fare Inflation Index</td><td>4.14%</td><td>
              <a href="http://www.youtube.com/watch?v=Q07Zp7tQBRQ" target="_blank">I want to ride my bicycle (Queens)</a></td>
            </tr>
            <tr>
            <td>Oil (WTI) Inflation Index estimated</td><td>13.59%</td><td>Oh, man! Oh, man...</td>
 
            </tr>
            <tr>
            <td>Post Stamp Inflation Index</td><td>2.92%</td><td>And, btw, email is for free...</td>
            </tr>
            <tr>
            <td>PC RAM (memory) Inflation Index</td><td>-28.34%</td>
              <td>Rejoyce "Intel Inside": for you it's deflation! :)</td>
 
            </tr>
            <tr>
        </tr></table>
    </div>
    <hr />
 
    <h2>This is a regular Table, which does not implement Alternate Rows</h2>
    <h3>Precious metals annualized price index</h3>
 
    <h3>(re: <a href="http://exm.nr/AuAgPt" target="_blank">
      First decade of 21st Century: Aurum is golden and Silver is such Argentum!</a>)</h3>
    <table>
        <tr>
        <td>Precious metals</td><td>Price Index</td><td>Note</td>
        </tr>
        <tr>
        <td>Silver</td><td>20.94%</td><td>Element Ag</td>
        </tr>
        <tr><td>Gold</td><td>17.86%</td><td>Element Au</td>
        <tr>
        <td>Platinum</td><td>10.98%</td><td>Element Pt</td>
        </tr>
        <tr>
        <td>Palladium</td><td>-1.86% </td><td>Element Pd</td>
        </tr>
    </tr></table>
    <hr />
    Disclaimer: all data is provided 'AS IS' for Demo purpose only
 
</body>
</html>

Browser Compatibility

As stated above, this solution should work in any Web Browser supporting HTML5, including the major browsers listed below:

Microsoft IE9+
Mozilla FireFox 4+
Google Chrome 10+
Safari 5+

License

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

About the Author

DrABELL

Chief Technology Officer Infosoft Int'l

United States

Member

Follow on Twitter

Dr. A. Bell has 20+ years of SW/EE experience, published 200+ tech articles and authored 37 inventions; Win/Web veteran, currently focused on: HTML5, CSS3, Javascript, jQuery, SQL, Windows 8, .NET, C#, WPF, Ultrabooks, Mobile. Developed popular Silverlight Media Player, 3 Fractions Calculator and best YouTube API for ASP.NET (#1 Goog). Sample pubs/projects:

Article Top

Poor

Excellent

Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Novel HTML5/CSS3 features simplify alternate rows styling in GridView, DetailsView, and other tables.

Type	Tip/Trick
Licence	CPOL
First Posted	8 Apr 2011
Views	40,898
Bookmarked	20 times

ASP.NETGridview
DataTableDataRow, +