在asp.net中滚动列表视图中的固定标题

Question

When i Add new rows to the listview up to certain height 200px after that it will scroll while scrolling header is also scrolling .how to fix this header should be constant

<asp:ListView ID="listview1" runat="server">
        <LayoutTemplate>
            <table runat="server" cellpadding="1" border="1"  style="background-color: #FFFFFF;
                border-collapse: collapse;border-color: #999999;border-style:none;border-width:1px;">
                <tr style="background-color: #E5E5FE">
                    <th>
                        Order
                    </th>
                    <th>
                        Column Title
                    </th>
                    <th>
                        DataType
                    </th>
                    <th>
                        Exapmles
                    </th>
                    <th>
                        Options
                    </th>
                    <th>
                       Delete
                    </th>
                </tr>
                <tr id="itemplaceholder" runat="server">
                </tr>
            </table>
        </LayoutTemplate>
        <ItemTemplate>
            <tr>

                <td>
                    <asp:Label ID="txtorder" Text='<%#Eval("OrderNo") %>' runat="server"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="txtcolumnname" Text='<%#Eval("ColumnTitle") %>' runat="server" Width="150"></asp:TextBox>
                </td>

                <td>
                <asp:DropDownList ID="ddldatatype" runat="server" Width="160"   >

                </asp:DropDownList>
                </td>
                <td>
                    <asp:DropDownList ID="ddlexamples"  runat="server" Width="160">
                      <asp:ListItem Text="test" Value="2"></asp:ListItem>
                    </asp:DropDownList>
                </td>
                <td>
                <asp:TextBox ID="txtoptions" Text='<%#Eval("Options") %>' runat="server" Width="150" ></asp:TextBox>
                </td>
                <td>
               <asp:CheckBox ID="chkdel" runat="server" />
                </td>
            </tr>
        </ItemTemplate>
        <AlternatingItemTemplate>
            <tr style="background-color: #EFEFEF">
                <td>
                    <asp:Label ID="txtorder" Text='<%#Eval("OrderNo") %>' runat="server"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="txtcolumnname" Text='<%#Eval("ColumnTitle") %>' runat="server" Width="150"></asp:TextBox>
                </td>
                <td>
                <asp:DropDownList ID="ddldatatype" runat="server" Width="160" >

                </asp:DropDownList>
                </td>
                <td>
                    <asp:DropDownList ID="ddlexamples" runat="server" Width="160">
                      <asp:ListItem Text="test" Value="2"></asp:ListItem>
                    </asp:DropDownList>
                </td>
                <td>
                <asp:TextBox ID="txtoptions"  Text='<%#Eval("Options") %>' runat="server" Width="150"></asp:TextBox>
                </td>
                <td>
               <asp:CheckBox ID="chkdel" runat="server" />
                </td>
            </tr>
        </AlternatingItemTemplate>
    </asp:ListView>
  </div>
    <br />
    <br />
    <asp:Button ID="btnAdd" runat="server" Text="Add New Row" OnClick="btnAdd_Click" />
      &nbsp &nbsp
            <asp:Button ID="btndelete" runat="server" Text="Delete" onclick="btndelete_Click" />           
            </td>         
        </tr>
    </table>

Answer 1

You can try to separate the header from the content and put the header outside the scrollable content.

<div>Some Page Content </div>
    //your heading goes here
    <div style="max-height: 200px; overflow: auto;">
       //your listview goes here
    </div>
<div>Some Page Content </div>

like this

   <div style="float:left; width:100%;" >

        <table id="Table1" runat="server" cellpadding="1" border="1" style="background-color: #FFFFFF;
            border-collapse: collapse; border-color: #999999; border-style: none; border-width: 1px;width:100%;">
            <tr style="background-color: #E5E5FE">
                <th style="width:15%;">
                    Order
                </th>
                <th style="width:15%;">
                    Column Title
                </th>
                <th style="width:15%;">
                    DataType
                </th>
                <th style="width:15%;">
                    Exapmles
                </th>
                <th style="width:15%;">
                    Options
                </th>
                <th style="width:25%;">
                    Delete
                </th>
            </tr>
        </table>
    </div>
   <div style="max-height: 200px; overflow: auto; float:left; width:100%;">
        <asp:ListView ID="listview1" runat="server">
            <LayoutTemplate>
                <table id="Table1" runat="server" cellpadding="1" border="1" style="background-color: #FFFFFF;
                    border-collapse: collapse; border-color: #999999; border-style: none; border-width: 1px;
                    ">
                    <tr style="background-color: #E5E5FE;display:none;">
                        <th>
                            Order
                        </th>
                        <th>
                            Column Title
                        </th>
                        <th>
                            DataType
                        </th>
                        <th>
                            Exapmles
                        </th>
                        <th>
                            Options
                        </th>
                        <th>
                            Delete
                        </th>
                    </tr>
                  <tr id="itemplaceholder" runat="server">
                    </tr>

                </table>


            </div>
            </LayoutTemplate>
            <ItemTemplate>

                <tr>
                    <td style="width:15%;">
                         <asp:Label ID="txtorder" Text='<%#Eval("OrderNo") %>' runat="server"></asp:Label>
                    </td>
                    <td style="width:15%;">
                        <asp:TextBox ID="txtcolumnname" Text='<%#Eval("ColumnTitle") %>' runat="server" Width="150"></asp:TextBox>
                    </td>
                    <td style="width:15%;">
                        <asp:DropDownList ID="ddldatatype" runat="server" Width="160">
                        </asp:DropDownList>
                    </td>
                    <td style="width:15%;">
                        <asp:DropDownList ID="ddlexamples" runat="server" Width="160">
                            <asp:ListItem Text="test" Value="2"></asp:ListItem>
                        </asp:DropDownList>
                    </td>
                    <td style="width:15%;">
                        <asp:TextBox ID="txtoptions" Text='<%#Eval("Options") %>' runat="server" Width="150"></asp:TextBox>
                    </td>
                    <td style="width:25%;">
                        <asp:CheckBox ID="chkdel" runat="server" />
                    </td>
                </tr>
            </ItemTemplate>
            <AlternatingItemTemplate>
                <tr style="background-color: #EFEFEF">
                    <td>
                      <asp:Label ID="txtorder" Text='<%#Eval("OrderNo") %>' runat="server"></asp:Label>
                    </td>
                    <td>
                        <asp:TextBox ID="txtcolumnname" Text='<%#Eval("ColumnTitle") %>' runat="server" Width="150"></asp:TextBox>
                    </td>
                    <td>
                        <asp:DropDownList ID="ddldatatype" runat="server" Width="160">
                        </asp:DropDownList>
                    </td>
                    <td>
                        <asp:DropDownList ID="ddlexamples" runat="server" Width="160">
                            <asp:ListItem Text="test" Value="2"></asp:ListItem>
                        </asp:DropDownList>
                    </td>
                    <td>
                        <asp:TextBox ID="txtoptions" Text='<%#Eval("Options") %>' runat="server" Width="150"></asp:TextBox>
                    </td>
                    <td>
                        <asp:CheckBox ID="chkdel" runat="server" />
                    </td>
                </tr>
            </AlternatingItemTemplate>
        </asp:ListView>
    </div>