Creating a Scrollable DataGrid with a Fixed Header

This live demo illustrates our first step in creating a scrollable DataGrid with a fixed header. Note that in this example, though, that the "header column" is offset a bit from the DataGrid's body...

Title Date Views
An Extensive Examination of the DataGrid Web Control: Part 14/5/200223449
Displaying Records in a DataGrid in Random Order5/10/20036477
Adding a New Record to the DataGrid in the Footer2/12/200312733
XML, the DataSet, and a DataGrid5/29/20024662
DataGrids, DataSets, and XML Strings7/17/20024326
Highlighting Search Keywords in a DataGrid Web Control7/24/20025101
Displaying Custom Classes in a DataGrid10/23/20024834
Transferring the Datagrid Data Between Web Forms5/8/20025552
Creating a Custom DataGridColumn Class10/2/20024753
Building a Master/Detail DataGrid4/2/200323463
Adding a DropDownList Web Control to the DataGrid's Editing Interface8/7/20027300
Creating a Fully Editable DataGrid4/18/200324977
Binding a DataGrid to an ADO Recordset3/28/20035207
Retain Scrollback Position After Postback in DataGrid1/15/20036464
Displaying a Column's Sum in the Footer2/5/20036371
Having a Client-Side MessageBox Display When Deleting a Record9/4/20026139
Top Questions About the DataGrid Web Control1/10/200216942
Understanding the Differences Among the DataGrid, DataList, and Repeater5/21/200316075
MouseOver Coloring for a DataGrid12/17/200216726
Hierarchical Data Binding in ASP.NET7/1/20039422
Deciding When to Use the DataGrid, DataList or Repeater7/23/20037298
Including Subheadings in a Datagrid7/26/20037990
Advanced DataGrid Usage11/11/20029286
Summarizing Data with ROLLUP7/30/20037893
Building a Pageable, Sortable DataGrid8/14/20037314
DataGrid Made Compliant with Section 508 of the Web Accessibility Initiative Guidelines8/19/20036695
Creating Custom Columns for the ASP.NET Datagrid9/10/200314696
Creating a Multi-table DataGrid in ASP.NET8/15/200310005
Common DataGrid Mistakes11/6/200318940
Creating a Fully Editable DataGrid12/15/200414616
Bidirectional Sorting with Up and Down Arrows in the Header6/15/200510443

Source Code 
 
<table align="center" border="1" cellspacing="0" style="border-collapse:collapse;position:relative;left:-9;">
<tr>
  <td bgcolor="#006699" width="400" align="center">
    <font color="White" size="4" face="Verdana"><b>Title</b></font>
  </td>
  <td bgcolor="#006699" width="100" align="center">
    <font color="White" size="4" face="Verdana"><b>Date</b></font>
  </td>
  <td bgcolor="#006699" width="100" align="center">
    <font color="White" size="4" face="Verdana"><b>Views</b></font>
  </td>
</tr>
</table>
</div>
<div style="height:100px; overflow:auto; vertical-align: top;"> 
    <asp:DataGrid id="dgArticles" runat="server" AutoGenerateColumns="False" 
            Font-Size="10pt" Font-Names="Verdana" ShowHeader="False" HorizontalAlign="Center" >
       <HeaderStyle font-size="13pt" font-bold="True" 
            horizontalalign="Center" forecolor="White" backcolor="#006699">
       </HeaderStyle> 
    
       <AlternatingItemStyle backcolor="#EEEEEE"></AlternatingItemStyle>
    
       <Columns> 
           <asp:HyperLinkColumn DataNavigateUrlField="ArticleID" 
                  DataNavigateUrlFormatString="/Articles/Goto.aspx?ID={0}"
                  DataTextField="Title" HeaderText="Title">
                  ItemStyle-Width="400px"
           </asp:HyperLinkColumn> 
        
           <asp:BoundColumn DataField="DateAuthored" HeaderText="Date Written" 
               DataFormatString="{0:d}" ItemStyle-Width="100px"></asp:BoundColumn>

           <asp:BoundColumn DataField="ClickThroughs" HeaderText="Views" 
                  DataFormatString="{0:d}" ItemStyle-HorizontalAlign="Center"
                  ItemStyle-Width="100px"></asp:BoundColumn>
        </Columns> 
    </asp:DataGrid>
</div>

[Return to the FAQ...]