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/200221145
Displaying Records in a DataGrid in Random Order5/10/20035687
Adding a New Record to the DataGrid in the Footer2/12/200311647
XML, the DataSet, and a DataGrid5/29/20024156
DataGrids, DataSets, and XML Strings7/17/20023802
Highlighting Search Keywords in a DataGrid Web Control7/24/20024592
Displaying Custom Classes in a DataGrid10/23/20024298
Transferring the Datagrid Data Between Web Forms5/8/20025023
Creating a Custom DataGridColumn Class10/2/20024259
Building a Master/Detail DataGrid4/2/200321720
Adding a DropDownList Web Control to the DataGrid's Editing Interface8/7/20026522
Creating a Fully Editable DataGrid4/18/200323203
Binding a DataGrid to an ADO Recordset3/28/20034462
Retain Scrollback Position After Postback in DataGrid1/15/20035714
Displaying a Column's Sum in the Footer2/5/20035615
Having a Client-Side MessageBox Display When Deleting a Record9/4/20025373
Top Questions About the DataGrid Web Control1/10/200215308
Understanding the Differences Among the DataGrid, DataList, and Repeater5/21/200314513
MouseOver Coloring for a DataGrid12/17/200215162
Hierarchical Data Binding in ASP.NET7/1/20038679
Deciding When to Use the DataGrid, DataList or Repeater7/23/20036542
Including Subheadings in a Datagrid7/26/20037200
Advanced DataGrid Usage11/11/20028549
Summarizing Data with ROLLUP7/30/20037058
Building a Pageable, Sortable DataGrid8/14/20036530
DataGrid Made Compliant with Section 508 of the Web Accessibility Initiative Guidelines8/19/20035933
Creating Custom Columns for the ASP.NET Datagrid9/10/200313538
Creating a Multi-table DataGrid in ASP.NET8/15/20039234
Common DataGrid Mistakes11/6/200317819
Creating a Fully Editable DataGrid12/15/200413418
Bidirectional Sorting with Up and Down Arrows in the Header6/15/20059533

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...]