1. This can be done by having DataGrid within Div tag and the set the overflow attribute as auto or scroll.
2. To freeze the headers hide the DataGridâs headers -- by setting âShowHeaderâ property of DataGrid to false.
For example check out the below code snippet,
<div>
<table border="1" cellspacing="0" style="WIDTH:800px;BORDER-COLLAPSE:collapse">
<tr class="tableHeader" bgcolor="#aaaadd" BorderColor="black">
<td style="WIDTH:200px">
Row Number
</td>
<td style="WIDTH: 200px">
Company Name
</td>
<td style="WIDTH:200px">
Contact Name
</td>
<td style="WIDTH:200px">
Address
</td>
</tr>
</table>
</div>
<div style=" OVERFLOW: auto; WIDTH: 813px; HEIGHT: 152px">
<asp:DataGrid id="DataGrid1" runat="server" SelectedItemStyle-BackColor="#99ccff" PagerStyle-
Visible="False" PageSize="10" ItemStyle-CssClass="tableItem" HeaderStyle-
CssClass="tableHeader" HeaderStyle-BackColor="#aaaadd" BorderColor="black"
AutoGenerateColumns="False" DataKeyField="CustomerID" ShowHeader="False">
<Columns>
<asp:templatecolumn ItemStyle-Width="200px">
<itemtemplate>
<%# Container.ItemIndex+1 %>
</itemtemplate>
</asp:templatecolumn>
<asp:boundcolumn ItemStyle-Width="200px" runat="server" taField="CompName">
</asp:boundcolumn>
<asp:boundcolumn ItemStyle-Width="200px" runat="server" DataField="ContName" >
</asp:boundcolumn>
<asp:boundcolumn ItemStyle-Width="200px" runat="server" DataField="Address" >
</asp:boundcolumn>
</Columns>
</asp:DataGrid>
</div>
You can extend it by setting the headers width dynamically by finding out the max data size in each column.
Best Regards
Vadivel
MVP ASP/ASP.NET
http://vadivel.thinkingms.com