固定表头和表列很简单的方法

有些时候列表中的数据很多会带有滚动条，在拖动滚动条时，如果想固定表头不让滚动可以使用下面的方法：

 

1.首先用dataGrid创建表

<div id="div-datagrid">
<asp:DataGrid id="DataGrid1" runat="server" CssClass="Grid" UseAccessibleHeader="True">
    <AlternatingItemStyle CssClass="GridAltRow"></AlternatingItemStyle>
    <ItemStyle CssClass="GridRow"></ItemStyle>
    <Columns>
    <asp:BoundColumn DataField="Name" HeaderText="Name" 
        ItemStyle-Wrap="False"></asp:BoundColumn>
    <asp:BoundColumn DataField="Address" HeaderText="Address" 
        ItemStyle-Wrap="False"></asp:BoundColumn>
    <asp:BoundColumn DataField="City" HeaderText="City" 
        ItemStyle-Wrap="False"></asp:BoundColumn>
    <asp:BoundColumn DataField="State" HeaderText="State" 
        ItemStyle-Wrap="False"></asp:BoundColumn>
    <asp:BoundColumn DataField="Zip" HeaderText="Zip" 
        ItemStyle-Wrap="False"></asp:BoundColumn>
    <asp:BoundColumn DataField="Random Babble" 
        HeaderText="Random Babble" 
        ItemStyle-Wrap="False"></asp:BoundColumn>
    </Columns>
</asp:DataGrid>
</div>

2.然后加css

/* Div container to wrap the datagrid */
div#div-datagrid {
width: 420px;
height: 200px;
overflow: auto;
scrollbar-base-color:#ffeaff;
}

/* Locks the left column */
td.locked, th.locked {
font-size: 14px;
font-weight: bold;
text-align: center;
background-color: navy;
color: white;
border-right: 1px solid silver;
position:relative;
cursor: default;
/*IE5+ only*/
left: expression(document.getElementById("div-datagrid").scrollLeft-2);
}

/* Locks table header */
th {
font-size: 14px;
font-weight: bold;
text-align: center;
background-color: navy;
color: white;
border-right: 1px solid silver;
position:relative;
cursor: default;
/*IE5+ only*/
top: expression(document.getElementById("div-datagrid").scrollTop-2);
z-index: 10;
}

/* Keeps the header as the top most item. Important for top left item*/
th.locked {z-index: 99;}

/* DataGrid Item and AlternatingItem Style*/
.GridRow {font-size: 10pt; color: black; font-family: Arial; 
             background-color:#ffffff; height:35px;}
.GridAltRow {font-size: 10pt; color: black; font-family: Arial; 
             background-color:#eeeeee; height:35px;}

 3.客户端 用javascript 固定

function lockCol(tblID) {
  var table = document.getElementById(tblID);
  var button = document.getElementById('toggle');
  var cTR = table.getElementsByTagName('tr');  //collection of rows

  if (table.rows[0].cells[0].className == '') {
    for (i = 0; i < cTR.length; i++)
    {
    var tr = cTR.item(i);
    tr.cells[0].className = 'locked'
    }
    button.innerText = "Unlock First Column";
  } else {
    for (i = 0; i < cTR.length; i++)
        {
    var tr = cTR.item(i);
    tr.cells[0].className = ''
    }
    button.innerText = "Lock First Column";
  }
}

4.服务器端固定

Sub Item_Bound(ByVal sender As Object, ByVal e As DataGridItemEventArgs) _
Handles DataGrid1.ItemDataBound
    e.Item.Cells(0).CssClass = "locked"
End Sub
引用  ： http://www.codeproject.com/KB/webforms/FreezePaneDatagrid.aspx