ASP.NETでリピータのヘッダ行を修正しました

Question

私はasp.netを使用してリピータでヘッダ行を修正する方法を理解しようとしています。ポジションを入れようとするとき：固定; trタグの中にあります。それはそれを修正するようだが、サイズが小さくなり、テーブルの残りの部分で動作しません。

どのようなヒントや正しい方向への助けが有意義に役立ちます！

おかげ

<div class="form-panel" style="font-size: small; text-align: left;"> 
    <div class="header"> 
     <div class="contentRestriction" style="height: 22px"> 
      Action Bulletin Exception 
      <asp:button id="addException" text="Add Exception" runat="server" style="float: right; margin-right: 20px" onclick="addExceptions" /> 
     </div> 
    </div> 
    <div class="commands"> 
     <div class="contentRestriction" style="overflow-y: scroll; width: 100%; height: 185px"> 
      <asp:repeater id="repException" runat="server" datasourceid="SP_AB_BULLETIN_EXCEPTION"> 
         <HeaderTemplate> 
          <div class="form-panel" style="font-size: small;"> 
           <table class="notepad-table" cellpadding="2" cellspacing="0" width="100%" > 
            <tr style="background-color: #eeeeee; font-weight: bold; ">         
             <td>Date Time From</td> 
             <td>Date Time To</td> 
             <td>Status</td> 
             <td>Last Modified</td> 
             <td>Last Modified By</td> 
             <td>Action</td> 
            </tr> 
         </HeaderTemplate> 
         <ItemTemplate> 
          <tr id="tr1" runat="server"> 
           <td> 
            <asp:Literal ID="Literal1" runat="server" Text='<%# Eval("EFTV_FROM") %>' /> 
           </td> 
           <td> 
            <asp:Literal ID="Literal2" runat="server" Text='<%# Eval("EFTV_TO") %>' /> 
           </td> 
           <td> 
            <asp:Literal ID="Literal3" runat="server" Text='<%# Eval("AB_STATUS1") %>' /> 
           </td> 
           <td> 
            <asp:Literal ID="Literal4" runat="server" Text='<%# Eval("LAST_MOD_DATE") %>' /> 
           </td> 
           <td> 
            <asp:Literal ID="Literal6" runat="server" Text='<%# Eval("UserName") %>' /> 
           </td> 
           <td> 
            <asp:Button ID="editException" Text="Edit" runat="server" CommandName="EXID" CommandArgument='<%# Eval("EX_ID") %>' OnCommand="editException" /> 
            <asp:Button ID="deleteException" Text="Delete" runat="server" CommandName="EXID" CommandArgument='<%# Eval("EX_ID") %>' OnCommand="deleteException" /> 
           </td> 

          </tr> 
         </ItemTemplate> 
         <FooterTemplate> 
      </table> 
     </div> 
     </FooterTemplate> 
        </asp:Repeater>  
    </div> 
</div> 
</div> 

Answer 1

はあなたのコードには2つの小さな変更を加えることができ、固定ヘッダの効果を得るために。

<div class="commands"> 
       <asp:Repeater ID="repException" runat="server" DataSourceID="SP_AB_BULLETIN_EXCEPTION"> 
        <HeaderTemplate> 
         <div class="form-panel" style="font-size: small;"> 
          <table class="notepad-table" cellpadding="2" cellspacing="0"> 
           <thead> 
            <tr style="background-color: #eeeeee; font-weight: bold;"> 
             <th>Date Time From</th> 
             <th>Date Time To</th> 
             <th>Status</th> 
             <th>Last Modified</th> 
             <th>Last Modified By</th> 
             <th>Action</th> 
            </tr> 
           </thead> 
           <tbody> 
        </HeaderTemplate> 
        <ItemTemplate> 
         <tr id="tr1" runat="server"> 
          <td> 
           <asp:Literal ID="Literal1" runat="server" Text='<%# Eval("EFTV_FROM") %>' /> 
          </td> 
          <td> 
           <asp:Literal ID="Literal2" runat="server" Text='<%# Eval("EFTV_TO") %>' /> 
          </td> 
          <td> 
           <asp:Literal ID="Literal3" runat="server" Text='<%# Eval("AB_STATUS1") %>' /> 
          </td> 
          <td> 
           <asp:Literal ID="Literal4" runat="server" Text='<%# Eval("LAST_MOD_DATE") %>' /> 
          </td> 
          <td> 
           <asp:Literal ID="Literal6" runat="server" Text='<%# Eval("UserName") %>' /> 
          </td> 
          <td> 
           <asp:Button ID="editException" Text="Edit" runat="server" CommandName="EXID" CommandArgument='<%# Eval("EX_ID") %>' OnCommand="editException" /> 
           <asp:Button ID="deleteException" Text="Delete" runat="server" CommandName="EXID" CommandArgument='<%# Eval("EX_ID") %>' OnCommand="deleteException" /> 
          </td> 

         </tr> 
        </ItemTemplate> 
        <FooterTemplate> 
         </tbody> 
          </table> 
          </div> 
        </FooterTemplate> 
       </asp:Repeater> 
      </div> 

出力：

<style type="text/css"> 
    table tbody, table thead { 
     display: block; 
    } 

    table tbody { 
     overflow: auto; 
     height: 100px; 
    } 

    th, td { 
     width: 150px; 
    } 
</style> 

2）は、以下のいずれかであなたの<div class="commands">を置き換えます

1）あなたのページの<head>セクションに次のスタイルルールを貼り付け