用CSS實現DataGird滾動而表頭不動

來源:互聯網
上載者:User

樣式:

<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>

:

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.