How To Fix Header and Column of GridView using CSS?

To fix the header and some column of the gridview follow the steps below. Just attach the code of css style and then set proper id to the Gridview and also to the column(if you want to fix column).

Style Property


<style>
 div#div-gridview {
 width: 450px;
 height: 300px;
 overflow: auto;
 font-family: verdana;
 font-size:12px;
 scrollbar-base-color:#ffeaff;
 }
 /* Locks the left column header */
 th.locked {
 font-weight: bold;
 text-align: center;
 background-color: #990000;
 color: white;
 border-right: 1px solid silver;
 position:relative;
 cursor: default;
 /*for IE5+ only*/
 left: expression(document.getElementById("div-datagrid").scrollLeft-2);
 }
 /*Locks the left column*/
 td.locked{
 text-align: left;
 border-right: 1px solid silver;
 background-color: #FFFFCC;
 position:relative;
 cursor: default;
 /*For IE5+ only*/
 left: expression(document.getElementById("div-datagrid").scrollLeft-2);
 }
 /* Locks table header */
 th {
 font-weight: bold;
 text-align: center;
 background-color: #990000;
 color: white;
 border-right: 1px solid silver;
 position:relative;
 cursor: default;
 /*For IE5+ only*/
 top: expression(document.getElementById("div-datagrid").scrollTop-2);
 z-index: 10;
 }
 /* Keeps the header as the top most item. */
 th.locked {z-index: 99;}

 /* GridView Item Style*/
 .GridRow {font-size: 11pt; color: black; font-family: Arial; background-color:#ffffff; height:30px;}
</style>

Then add one new div(HTML control) set the id as div-gridview and now time to add gridview to the aspx page. Also fix some width and height for div and gridview show that it will put a scrollbar.

Here is the code for the div and grid view.

ASPX Page Code for Gridview and DIV


<div id="div-gridview" style="z-index: 101; left: 7px; width: 450px; position: absolute; top: 90px; height: 302px">
 <asp:GridView ID="GridView1" runat="server" Height="310px" Style="z-index: 110; left: 0px;position: absolute; top: 0px" OnPageIndexChanging ="GridView1_PageIndexChanging" Width="450px" AutoGenerateColumns="False" AllowPaging="True" PageSize="50">
    <Columns>
      <asp:BoundField HeaderText="Column1" DataField="Col1" >
         <ItemStyle CssClass ="locked" Width="200px" />
         <HeaderStyle CssClass ="locked" Height="10px" />
      </asp:BoundField>
      <asp:BoundField HeaderText="Column2" DataField="col2" >
         <ItemStyle Width="80px" />
         <HeaderStyle Height="10px" />
      </asp:BoundField>
      <asp:TemplateField HeaderText="Column3">
      <ItemTemplate>
          <asp:TextBox ID="txtcol3" Width="50px" runat="server" Style="position: static" Text='<%# Eval("col3") %>'></asp:TextBox>   
      </ItemTemplate>
      <ItemStyle Width="50px" />
      <HeaderStyle Height="20px" />
    </asp:TemplateField>
   </Columns>
 </asp:GridView>
</div>

In the above example i fix the header as well as first column.

Use this code and enjoy....

Thank You.

Post Comment:

Notify me by email when others post comments to this article.

Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.

No HTML formatting and links to other web sites are allowed.

This is a strictly moderated site. Absolutely no spam allowed.

Name:	Sign In to fill automatically.
Email:	(Will not be published, but required to validate comment)
	Type the numbers and letters shown on the left.

How to Fix Header and Column of a GridView?

How To Fix Header and Column of GridView using CSS?

Style Property

ASPX Page Code for Gridview and DIV

Post Comment: