1.首先在页面中划出一个带有滚动条的区域:
<DIV style="OVERFLOW:auto; WIDTH:54.55%; HEIGHT:136px; TEXT-ALIGN:left">
</DIV>
2.将datagrid添加到区域之中并引用css固定标题:
<HEAD>
......
<link rel="stylesheet" href="StyleSheet1.css" type="text/css">
</HEAD>
<body〉
<DIV style="OVERFLOW:auto; WIDTH:54.55%; HEIGHT:136px; TEXT-ALIGN:left">
<asp:datagrid id="DataGrid1" runat="server" AllowSorting="True" Height="96px" GridLines="Vertical"
CellPadding="3" BackColor="White" BorderWidth="1px" BorderStyle="None" BorderColor="#999999"
Width="592px" ShowHeader="true">
<SelectedItemStyle Font-Bold="True" Wrap="False" ForeColor="White" BackColor="#008A8C"></SelectedItemStyle>
<EditItemStyle Wrap="False" Width="10px"></EditItemStyle>
<AlternatingItemStyle Wrap="False" BackColor="Gainsboro"></AlternatingItemStyle>
<ItemStyle Wrap="False" ForeColor="Black" BackColor="#EEEEEE"></ItemStyle>
<HeaderStyle Font-Bold="True" Wrap="False" ForeColor="White" BackColor="#000084" CssClass="gridFixedHeader"></HeaderStyle>
<FooterStyle Wrap="False" ForeColor="Black" BackColor="#CCCCCC"></FooterStyle>
<Columns>
<asp:EditCommandColumn ButtonType="LinkButton" UpdateText="更新" CancelText="取消" EditText="编辑">
<HeaderStyle Wrap="False"></HeaderStyle>
<ItemStyle Wrap="False"></ItemStyle>
<FooterStyle Wrap="False"></FooterStyle>
</asp:EditCommandColumn>
</Columns>
<PagerStyle HorizontalAlign="Center" ForeColor="Black" BackColor="#999999" Wrap="False" Mode="NumericPages"></PagerStyle>
</asp:datagrid>
</DIV>
</body〉
3.css文件代码:
.gridFixedHeader
{
position:relative;
top:expression(this.offsetParent.scrollTop);
}