ASP.NET 목록보기 - 나는 순간, 나는 스크롤 그리드를 가지고하는 ASP.NET ListView 컨트롤을 사용하고 CSS

Question

를 사용하여 고정 된 헤더 스크롤 :

(아래 예는 단순화를 위하여 내장 된 스타일을 포함합니다 질문의)

<asp:ListView ID="ListView" runat="server" DataKeyNames="Id"> 
     <LayoutTemplate> 
      <div style="height:225px; overflow:auto;"> 
       <table runat="server"> 
        <tr> 
         <th> 
          <span>Column1</span> 
         </th> 
         <th> 
          <span>Column2</span> 
         </th> 
         <th> 
          <span>Column3</span> 
         </th> 
        </tr> 
        <tr id="itemPlaceholder" runat="server" /> 
       </table> 
      </div> 
     </LayoutTemplate> 
     <ItemTemplate> 
      <tr id="items" runat="server"> 
       <td class="first"> 
        <%#Eval("Column1")%> 
       </td> 
       <td> 
        <%#Eval("Column2")%> 
       </td> 
       <td> 
        <%#Eval("Column3")%> 
       </td> 
      </tr> 
     </ItemTemplate> 
    </asp:ListView> 

내 머리글이 고정되도록 CSS를 적용하고 싶습니다.

작동시키기 위해 어떤 스타일링을 추가 할 수 있습니까?

Answer 1

시도 http://www.imaputz.com/cssStuff/bigFourVersion.html?

Answer 2

방금 ​​CSS를 사용할 필요가 없습니다. 레이아웃 템플릿의 헤더 행을 별도의 테이블로 정의하십시오. div에 overflow=scroll으로 새 테이블을 감싸고 콘테스트 소유자를 바로 드롭하십시오.

스크롤 막대를위한 공간을 만들기위한 추가 열이 있습니다. 그런 다음 열의 너비를 머리글과 동일하게 설정하면됩니다.

포스트 백 후에 스크롤 위치를 유지하려면 JavaScript를 포함해야하지만 다른 스레드입니다. 여기 내가 어떻게 그것을 성취했는지 보여주는 예가있다.

<asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1">      
     <EmptyDataTemplate> 
      <table id="Table1" runat="server" 
       style="background-color: #FFFFFF;border-collapse: collapse;border-color: #999999;border-style:none;border-width:1px;"> 
       <tr> 
        <td> 
         No data was returned.</td> 
       </tr> 
      </table> 
     </EmptyDataTemplate>    
     <ItemTemplate> 
      <tr style="background-color: #E0FFFF;color: #333333;"> 
       <td style="width:100px;"> 
        <asp:LinkButton ID="Butpullacct" OnClick="Butpullacct_Click" runat="server">Reaccess</asp:LinkButton> 
       </td> 
       <td style="display:none"> 
        <asp:Label ID="idLabel" runat="server" Text='<%# Eval("id") %>' /> 
       </td> 
       <td style="width:100px;"> 
        <asp:Label ID="BTNRSLabel" runat="server" Text='<%# Eval("BTNRS") %>' /> 
       </td> 
       <td style="width:100px;"> 
        <asp:Label ID="NoticeDueLabel" runat="server" 
         Text='<%# Eval("NoticeDue")%>' /> 
       </td> 
       <td style="width:75px;"> 
        <asp:Label ID="NoticeTypeLabel" runat="server" 
         Text='<%# Eval("NoticeType") %>' /> 
       </td> 
       <td style="width:200px;"> 
        <asp:Label ID="DispDescLabel" runat="server" Text='<%# Eval("DispDesc") %>' /> 
       </td> 
       <td style="width:175px;"> 
        <asp:Label ID="AccessTimeLabel" runat="server" 
         Text='<%# Eval("AccessTime") %>' /> 
       </td> 
       <td style="width:175px;"> 
        <asp:Label ID="ExitTimeLabel" runat="server" Text='<%# Eval("ExitTime") %>' /> 
       </td> 
      </tr> 
     </ItemTemplate> 
     <LayoutTemplate> 
      <table id="Table2" runat="server"> 
       <tr id="Tr1" runat="server"> 
        <td id="Td1" runat="server"> 
         <table ID="itemPlaceholderContainer" runat="server" border="1" 
          style="background-color: #FFFFFF;border-collapse: collapse;border-color: #999999;border-style:none;border-width:1px;font-family: Verdana, Arial, Helvetica, sans-serif;"> 
          <tr id="Tr2" runat="server" style="background-color: #E0FFFF;color: #333333;"> 
           <th id="Th1" runat="server" style="width:100px;"></th> 
           <th id="Th2" runat="server" style="display:none"> 
            id</th> 
           <th id="Th3" runat="server" style="width:100px;"> 
            BTNRS</th> 
           <th id="Th4" runat="server" style="width:100px;"> 
            Notice Due Date</th> 
           <th id="Th5" runat="server" style="width:75px;"> 
            Notice Type</th> 
           <th id="Th6" runat="server" style="width:200px;"> 
            Action</th> 
           <th id="Th7" runat="server" style="width:175px;"> 
            Access Time</th> 
           <th id="Th8" runat="server" style="width:175px;"> 
            Exit Time</th> 
           <th id="Th9" style="width:13px;" runat="server"> 
            </th> 
          </tr>      
         </table> 
         <div style="overflow:scroll; height:500px;"> 
          <table border="1" style="background-color: #FFFFFF;border-collapse: collapse;border-color: #999999;border-style:none;border-width:1px;font-family: Verdana, Arial, Helvetica, sans-serif;"> 
           <tr ID="itemPlaceholder" runat="server"> 
           </tr> 
          </table>        
         </div> 
        </td> 
       </tr> 
       <tr id="Tr3" runat="server"> 
        <td id="Td2" runat="server" 
         style="text-align: center;background-color: #5D7B9D;font-family: Verdana, Arial, Helvetica, sans-serif;color: #FFFFFF"> 
        </td> 
       </tr> 
      </table> 
     </LayoutTemplate>   
    </asp:ListView>