對齊Xpages中的標題和數據列重複控制

Question

我已經創建了一個非常好的Xpages重複控件，但似乎無法正確排列標題列和數據列。這可能不是重複的問題，因爲我總是遇到讓我的列寬度正常工作的問題。

理想情況下，我希望每個列（最後除外）都有一個集合，最後一列要增長到容器的寬度。如果這是不可能的，我想只知道最佳做法是什麼。

<xp:panel> 
      <xp:table style="width:99.00%" 
       styleClass="lotusFirst lotusSort"> 
       <xp:tr> 
        <xp:td style="width:150.0px"> 
         <xp:label value="Employee" id="label1"></xp:label> 
        </xp:td> 
        <xp:td style="width:200.0px"> 
         <xp:label value="Computer Number" id="label2"></xp:label> 
        </xp:td> 
        <xp:td> 
         <xp:label value="Create Date" id="label3"></xp:label> 
        </xp:td> 
        <xp:td> 
         <xp:label value="Create User" id="label4"></xp:label> 
        </xp:td> 
        <xp:td> 
         <xp:label value="ID" id="label5"></xp:label> 
        </xp:td> 
       </xp:tr> 
      </xp:table> 

      <xp:repeat id="repeat1" 
       rows="#{javascript:compositeData.rows}" var="rowData" 
       indexVar="repeatIndex" value="#{view1}"> 

       <xp:this.facets> 
        <xp:text disableTheme="true" xp:key="header" 
         escape="false"> 
         <xp:this.value><![CDATA[<table class='xspDataTable repeatRowColors' border='0' cellspacing='0' cellpadding='0' width='800px'>]]></xp:this.value> 
        </xp:text> 
        <xp:text disableTheme="true" xp:key="footer" 
         escape="false"> 
         <xp:this.value><![CDATA[</table>]]></xp:this.value> 
        </xp:text> 
       </xp:this.facets> 

       <xp:tr id="rowDataContainer"> 

        <xp:td style="width:150px"> 
         <xp:link escape="true" id="link1" 
          value="/xpFormPCBuild.xsp"> 
          <xp:this.text><![CDATA[#{javascript:rowData.getColumnValue("employeeName")}]]></xp:this.text> 
         </xp:link> 
        </xp:td> 
        <xp:td style="width:200px"> 
         <xp:text escape="true" id="computedField2"> 
          <xp:this.value><![CDATA[#{javascript:rowData.getColumnValue("computerName");}]]> 
          </xp:this.value> 
         </xp:text> 
        </xp:td> 
        <xp:td style="width:200px"> 
         <xp:text escape="true" id="computedField3"> 
          <xp:this.value><![CDATA[#{javascript:rowData.getColumnValue("CrtDte");}]]> 
          </xp:this.value> 
         </xp:text> 
        </xp:td> 
        <xp:td style="width:200px"> 
         <xp:text escape="true" id="computedField4"> 
          <xp:this.value><![CDATA[#{javascript:rowData.getColumnValue("crtUsr");}]]> 
          </xp:this.value> 
         </xp:text> 
        </xp:td> 
        <xp:td style="width:250px"> 
         <xp:text escape="true" id="computedField5"> 
          <xp:this.value><![CDATA[#{javascript:rowData.getColumnValue("ID");}]]> 
          </xp:this.value> 
         </xp:text> 
        </xp:td> 

       </xp:tr> 

      </xp:repeat> 
     </xp:panel> 

Answer 1

Bryan， 您需要將表頭代碼放入標題facet中。基本上你現在正在做兩張桌子，而不是一張桌子。這應該可以解決你的問題。

Answer 2

此代碼產生的標記無效，因爲<TR>元素不在表格中。如果您將關閉<TABLE>標籤移動到重複控制之後，表格列將會正確對齊。只要確保重複中的<TD>的數量與標題中的數量完全相同即可。