代码改变世界

用CSS实现DataGird滚动而表头不动

2006-12-28 12:02  蓝之风  阅读(678)  评论(0)  编辑  收藏  举报

样式:

<style> .fixTitle { BACKGROUND: navy; COLOR: white; POSITION: relative; ; TOP: expression(this.offsetParent.scrollTop) } 
 .scorllDataGrid { OVERFLOW-Y: scroll; HEIGHT: 300px }
 </style>
Html
<body MS_POSITIONING="GridLayout">
        <form id="Form1" method="post" runat="server">
            <div class="scorllDataGrid" style="WIDTH: 696px; HEIGHT: 300px">
                <asp:datagrid id="dgClassList" runat="server" Width="688px" AutoGenerateColumns="False" CellPadding="4"
                    BackColor="White" BorderWidth="1px" BorderStyle="None" BorderColor="#CC9966">
                    <FooterStyle ForeColor="#330099" BackColor="#FFFFCC"></FooterStyle>
                    <SelectedItemStyle Font-Bold="True" ForeColor="#663399" BackColor="#FFCC66"></SelectedItemStyle>
                    <ItemStyle ForeColor="#330099" BackColor="White"></ItemStyle>
                    <HeaderStyle Font-Bold="True" ForeColor="#FFFFCC" CssClass="fixTitle" BackColor="#990000"></HeaderStyle>
                    <Columns>
                        <asp:BoundColumn DataField="RequirementID" HeaderText="流水号">
                            <HeaderStyle Wrap="False"></HeaderStyle>
                        </asp:BoundColumn>
                        <asp:BoundColumn DataField="RequirementNo" HeaderText="编号">
                            <HeaderStyle Wrap="False"></HeaderStyle>
                        </asp:BoundColumn>
                        <asp:BoundColumn DataField="Name" HeaderText="需求名称">
                            <HeaderStyle Wrap="False"></HeaderStyle>
                        </asp:BoundColumn>
                        <asp:BoundColumn DataField="userName" HeaderText="提出人">
                            <HeaderStyle Wrap="False"></HeaderStyle>
                        </asp:BoundColumn>
                    </Columns>
                    <PagerStyle HorizontalAlign="Center" ForeColor="#330099" BackColor="#FFFFCC"></PagerStyle>
                </asp:datagrid>
            </div>
        </form>
    </body>
效果图: