Scrollable Gridview with fixed Header

Scrollable Gridview with fixed Header

Step 1: Design web page  .aspx

<form id="form1" runat="server">

        <div style =" background-color:#3366ff; 

        height:30px;width:460px;">

        <table cellspacing="0" cellpadding = "0" rules="all" border="1"

         style="width:460px;color:white;

         border-collapse:collapse;height:100%;font-family:Verdana;">

            <tr>

               <td style ="width:150px;text-align:center">Name</td>

               <td style ="width:150px;text-align:center">City</td>

               <td style ="width:150px;text-align:center">Phone Number</td>

              

            </tr>

        </table>

        </div>

        <div style ="height:200px; width:480px; overflow:auto;">

        <asp:GridView ID="gr" runat="server"  Font-Names="verdana"

            AutoGenerateColumns = "false"  ShowHeader = "false"

            HeaderStyle-ForeColor="White" AlternatingRowStyle-BackColor="WhiteSmoke" >

           <Columns>

            <asp:BoundField ItemStyle-Width = "150px" DataField = "Name" />

            <asp:BoundField ItemStyle-Width = "150px" DataField = "City" />

            <asp:BoundField ItemStyle-Width = "150px" DataField = "Phone" />

           

           </Columns>

        </asp:GridView>

        </div>

    </form>

 Step 2: Logic on .CS page

    protected void Page_Load(object sender, EventArgs e)

    {

        DataTable dt = new DataTable();

        dt.Columns.Add("Name");

        dt.Columns.Add("City");

        dt.Columns.Add("Phone");

        dt.Rows.Add("Kandy", "Delhi", "8802***2564");

        dt.Rows.Add("Sam", "Hr", "545502*2544");

        dt.Rows.Add("Izhar", "Up", "95802*2452");

        dt.Rows.Add("Vineet", "Delhi", "88022564***");

        dt.Rows.Add("Kandy", "Delhi", "8802***2564");

        dt.Rows.Add("Sam", "Hr", "545502*2544");

        dt.Rows.Add("Izhar", "Up", "95802*2452");

        dt.Rows.Add("Vineet", "Delhi", "88022564***");

        dt.Rows.Add("Kandy", "Delhi", "8802***2564");

        dt.Rows.Add("Sam", "Hr", "545502*2544");

        dt.Rows.Add("Izhar", "Up", "95802*2452");

        dt.Rows.Add("Vineet", "Delhi", "88022564***");

        dt.Rows.Add("Kandy", "Delhi", "8802***2564");

        dt.Rows.Add("Sam", "Hr", "545502*2544");

        dt.Rows.Add("Izhar", "Up", "95802*2452");

        dt.Rows.Add("Vineet", "Delhi", "88022564***");

        dt.Rows.Add("Kandy", "Delhi", "8802***2564");

        dt.Rows.Add("Sam", "Hr", "545502*2544");

        dt.Rows.Add("Izhar", "Up", "95802*2452");

        dt.Rows.Add("Vineet", "Delhi", "88022564***");

        gr.DataSource = dt;

        gr.DataBind();

      

      

    }

Finally it will look like :-