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/200218544
Displaying Records in a DataGrid in Random Order5/10/20034613
Adding a New Record to the DataGrid in the Footer2/12/200310160
XML, the DataSet, and a DataGrid5/29/20023564
DataGrids, DataSets, and XML Strings7/17/20023255
Highlighting Search Keywords in a DataGrid Web Control7/24/20023859
Displaying Custom Classes in a DataGrid10/23/20023725
Transferring the Datagrid Data Between Web Forms5/8/20024441
Creating a Custom DataGridColumn Class10/2/20023706
Building a Master/Detail DataGrid4/2/200319366
Adding a DropDownList Web Control to the DataGrid's Editing Interface8/7/20025491
Creating a Fully Editable DataGrid4/18/200320797
Binding a DataGrid to an ADO Recordset3/28/20033448
Retain Scrollback Position After Postback in DataGrid1/15/20034751
Displaying a Column's Sum in the Footer2/5/20034616
Having a Client-Side MessageBox Display When Deleting a Record9/4/20024319
Top Questions About the DataGrid Web Control1/10/200213193
Understanding the Differences Among the DataGrid, DataList, and Repeater5/21/200312468
MouseOver Coloring for a DataGrid12/17/200213028
Hierarchical Data Binding in ASP.NET7/1/20037741
Deciding When to Use the DataGrid, DataList or Repeater7/23/20035564
Including Subheadings in a Datagrid7/26/20036170
Advanced DataGrid Usage11/11/20027605
Summarizing Data with ROLLUP7/30/20035367
Building a Pageable, Sortable DataGrid8/14/20035571
DataGrid Made Compliant with Section 508 of the Web Accessibility Initiative Guidelines8/19/20034929
Creating Custom Columns for the ASP.NET Datagrid9/10/200312002
Creating a Multi-table DataGrid in ASP.NET8/15/20038216
Common DataGrid Mistakes11/6/200316187
Creating a Fully Editable DataGrid12/15/200411661
Bidirectional Sorting with Up and Down Arrows in the Header6/15/20058268

Source Code 
 
<div>
<table align="center" border="1" cellspacing="0" style="border-collapse:collapse;">
<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...]