Problema para Fixar Coluna em uma Grid

Question

Galera é o seguinte, estou fazendo um grid com barras de rolagem porem algumas colunas eu queria deixar fixas na rolagem horizontal

esse grid tem a primeira coluna fixa e as outras colunas eu crio dinamicamente

o meu problema é que o meu grid fica dentro de uma div e um panel, mas quando eu tento fixar a primeira coluna, ela estoura o tamanho do div e acaba desconfigurando toda a página

abaixo um exemplo do código que estou usando:

 

<asp:Panel ID="pnNF" runat="server" GroupingText="Grid Com Barra de Rolagem" 

        CssClass="PanelGrid">

	       <div class="DivGrid" style="overflow: auto; font-family: Verdana; font-size: 10px;">

         <asp:GridView ID="grdMeuGrid" runat="server" 

          BackColor="White" CssClass="TamahoGrid" 

          BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="3" 

          EmptyDataText="Não há informações a serem exibidas"

          onrowdeleting="grdMeuGrid_RowDeleting" 

          onrowdatabound="grdMeuGrid_RowDataBound" ShowFooter="True" 

          AutoGenerateColumns="False">

          <RowStyle ForeColor="#000066" />

          <Columns>

           <asp:TemplateField HeaderText="Nota Fiscal" FooterText="Total">

            <ItemTemplate>

             <asp:TextBox ID="txtColunaNf" runat="server" MaxLength="10" Text='<%# Bind("Coluna_NF") %>'             

              ToolTip="Digite o numéro da nota fiscal" 

              CssClass="TamnhoCampoGrid" Width="75px" ></asp:TextBox>

            </ItemTemplate>

            <FooterStyle HorizontalAlign="Center" />

           </asp:TemplateField>

          </Columns>

          <FooterStyle BackColor="#006699" ForeColor="White" 

           BorderWidth="1px" CssClass="FixaFooter" />

          <PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />

          <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />

          <HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" 

           CssClass="FixaHeader" />

         </asp:GridView>

        </div>

       </asp:Panel>

 

Aqui os CSS que fazem o controle do tamanho do grid, da barra de rolagem do grid e de tentar fixar a coluna

.DivGrid

  {

  	height: 220px;

   width: 1030px;

  }

  .PanelGrid

  {

  	height: 240px;

   width: 1040px;

  }

  .TamahoGrid

  {

  	font-family: Verdana;

   font-size: 9px;

  	height: 90px;

   width: 1110px;

  }

 

Aqui é onde eu fixo a coluna, cabeçalho e rodapé:

.FixaHeader

  {

   position: relative;

  }

  .FixaFooter

  {

   font-weight:bold; position:relative;

   bottom: expression(getScrollBottom(this.parentNode.parentNode.parentNode.parentNode));

  }

  .FixaColuna

  {  	

  	position: relative;

  }

 

Aqui é o código onde eu populo o grid

public DataTable PopulaGrid()

  {

   try

   {



tabela.Columns.Add(new DataColumn("Coluna_NF", Type.GetType("System.String")));



    for (int i = 1; i <= 25; i++)

    {

     DataRow novalinha = null; // adiciona algumas linhas em branco

     novalinha = tabela.NewRow();

     novalinha[0] = "";

     tabela.Rows.Add(novalinha);

    }

    return tabela;

   }

   catch (Exception ex)

   {

    throw new Exception(ex.Message);

   }

  }





protected void btPopulaGrid_Click(object sender, EventArgs e)

  {

   try

   {



// posso colocar dentro do metodo que popula o grido ou no evento databound

this.grdMeuGrid.Columns[0].ItemStyle.CssClass = "FixaColuna";

    



this.MeuGrid.DataSource = PopulaGrid();

this.MeuGrid.DataBind();



}

   catch (Exception ex)

   {

    ScriptManager.RegisterStartupScript(Page, Page.GetType(), Guid.NewGuid().ToString(), "alert('" + ex.Message + "');", true);

   }

  }