Aligning header and data columns in Xpages Repeat Control

Question

I have a very nice Xpages repeat control created, but cannot seem to get the header column and data column to line up correctly. It may not be an issue with the repeat, because I have always had issues with getting the width of my columns to work correctly.

Ideally I would like each column (except the last) to have a set with, and the last column to grow to the width of the the container. If this is not possible I would like to just know what the best practice is.

<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

Your markup this code produces isn't valid as the <TR> elements are outside the table. if you move the closing <TABLE> tag to after the repeat control the table columns will be aligned properly. Just make sure the amount of <TD> in the repeat are exactly the same as they are in the header.

Answer 2

Bryan, You need to put your table header code into the header facet. Basically you're doing 2 tables right now instead of just one. That should solve your problems.