Scrollable Gridview with a fix header

[NelG]

I have a task to design to build a Scrollable Gridview with a fix header. I have tried developing it with a Div\[code\] <div id="DataDiv" style="overflow: auto; border: 1px solid olive; width: 600px; height: 300px;" /> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" OnRowDataBound="Gridview1_RowDataBound" ShowHeader="false" RowStyle-VerticalAlign="Bottom"> <Columns> <asp:BoundField DataField="dbms_id" HeaderText="ID" ItemStyle Width="30px" /> <asp:BoundField DataField="dbms" HeaderText="Dbms" ItemStyle-Width="50px" /> <asp:BoundField DataField="version" HeaderText="Version" ItemStyle-Width="30px" /> </Columns> </asp:GridView> </div>\[/code\]but it doesn't work as the header didn't get fix.then i find one more code, as\[code\]<div style=" background-repeat: repeat-x; height: 30px; width: 200px; margin: 0; padding: 0"> <table cellspacing="0" cellpadding="0" rules="all" border="1" id="tblHeader" style="font-family: Arial; font-size: 10pt; width: 200px; color: Black; border-collapse: collapse; height: 100%;"> <tr> <td style="width: 30px; text-align: center"> ID </td> <td style="width: 50px; text-align: center"> Dbms </td> <td style="width: 30px; text-align: center"> Version </td> </tr> </table> </div> <div style ="height:100px; width:617px; overflow:auto;"> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" OnRowDataBound="Gridview1_RowDataBound" ShowHeader="false" RowStyle-VerticalAlign="Bottom"> <Columns> <asp:BoundField DataField="dbms_id" HeaderText="ID" ItemStyle-Width="30px" /> <asp:BoundField DataField="dbms" HeaderText="Dbms" ItemStyle-Width="50px" /> <asp:BoundField DataField="version" HeaderText="Version" ItemStyle-Width="30px" /> </Columns> </asp:GridView> </div>\[/code\]in this method, i am designing the header using pure html.now the issue is, what is the best method to implement this requirement.