+ Start a Discussion
MiralomaMiraloma 

apex:repeat adds extra rows in the table inside apex:pageBlockSection

I use apex:repeat to build the rows of a table. The table is inside a apex:pageBlockSection. SFDC adds an extra row/td and messes up my table. See below. Notice the <td class="dataCol  last " colSpan="2"> in the output.

Does anyone know of a work around?

My VF code:
<apex:pageBlockSection title="Section 1: Summary Color Codes" columns="1">
        <table width="100%" border="1" cellpadding="0" cellspacing="0">
            <tr>
                <th></th>
                <th>Total</th>
                <th>% of Total</th>
                <th>US</th>
                <th>EU</th>
            </tr>
            <tr style="font-weight: bold;">
                <td colspan="5">Product Profile</td>
            </tr>
            <apex:repeat value="{!PGStatCurrStrList}" var="pg">
                <tr>
                    <td>&nbsp;&nbsp;&nbsp;{!pg['Label']}</td>
                    <td>{!pg['Total']}</td>
                    <td>{!pg['%']}</td>
                    <td>{!pg['US']}</td>
                    <td>{!pg['EU']}</td>
                </tr>
            </apex:repeat>
        </table>
    </apex:pageBlockSection>

Page source shows this:
<div id="j_id0:j_id1:j_id6"><div class="pbSubheader brandTertiaryBgr first tertiaryPalette"><img src="/s.gif" alt="Hide Section - Section 1: Summary Color Codes"  class="hideListButton" id="img_j_id0:j_id1:j_id6" name="Section 1: Summary Color Codes" onclick="twistSection(this);" onkeypress="if (event.keyCode=='13')twistSection(this);" style="cursor:pointer;" tabindex="0" title="Hide Section - Section 1: Summary Color Codes"/><h3>Section 1: Summary Color Codes</h3></div><div class="pbSubsection"><table class="detailList" border="0" cellpadding="0" cellspacing="0"><tr><td class="dataCol  first " colSpan="2">
  <table border="1" cellpadding="0" cellspacing="0" width="100%">
   <tr>
    <th></th>
    <th>Total</th>
    <th>% of Total</th>
    <th>US</th>
    <th>EU</th>
   </tr>
   <tr style="font-weight: bold;">
    <td colspan="5">Product Profile</td>
   </tr></td><td class="dataCol  first " colSpan="2">
    <tr>
     <td>&nbsp;&nbsp;&nbsp;Dark Fiber</td>
     <td>USD 0.00</td>
     <td>0%</td>
     <td>USD 0.00</td>
     <td>USD 0.00</td>
    </tr></td></tr><tr><td class="dataCol " colSpan="2">
    <tr>
     <td>&nbsp;&nbsp;&nbsp;Ethernet</td>
     <td>USD 123.00</td>
     <td>40%</td>
     <td>USD 123.00</td>
     <td>USD 0.00</td>
    </tr></td><td class="dataCol " colSpan="2">
    <tr>
     <td>&nbsp;&nbsp;&nbsp;FTT</td>
     <td>USD 182.16</td>
     <td>60%</td>
     <td>USD 182.16</td>
     <td>USD 0.00</td>
    </tr></td></tr><tr><td class="dataCol " colSpan="2">
    <tr>
     <td>&nbsp;&nbsp;&nbsp;IP Services</td>
     <td>USD 0.00</td>
     <td>0%</td>
     <td>USD 0.00</td>
     <td>USD 0.00</td>
    </tr></td><td class="dataCol " colSpan="2">
    <tr>
     <td>&nbsp;&nbsp;&nbsp;SONET</td>
     <td>USD 0.00</td>
     <td>0%</td>
     <td>USD 0.00</td>
     <td>USD 0.00</td>
    </tr></td></tr><tr><td class="dataCol " colSpan="2">
    <tr>
     <td>&nbsp;&nbsp;&nbsp;Wavelengths</td>
     <td>USD 0.00</td>
     <td>0%</td>
     <td>USD 0.00</td>
     <td>USD 0.00</td>
    </tr></td><td class="dataCol " colSpan="2">
    <tr>
     <td>&nbsp;&nbsp;&nbsp;zColo</td>
     <td>USD 0.00</td>
     <td>0%</td>
     <td>USD 0.00</td>
     <td>USD 0.00</td>
    </tr></td></tr><tr><td class="dataCol  last " colSpan="2">
    <tr>
     <td>&nbsp;&nbsp;&nbsp;zTech</td>
     <td>USD 0.00</td>
     <td>0%</td>
     <td>USD 0.00</td>
     <td>USD 0.00</td>
    </tr></td><td class="dataCol  last " colSpan="2">
  </table></td></tr></table></div></div></div><div class="pbFooter secondaryPalette"><div class="bg"></div></div></div></div></div></div>
Best Answer chosen by Miraloma
Vamsi KrishnaVamsi Krishna
Its becos of the apex:pageBlockSection since each column renders into 2 cells one for label and one for value..

you should either move the table out of the pageBlockSection or if you need it to be within the pageBlockSection, then wrap your table inside an outputPanel

<apex:pageBlockSection title="Section 1: Summary Color Codes" columns="1">
   <apex:outputPanel>        
        <table width="100%" border="1" cellpadding="0" cellspacing="0">
            <tr>
                <th></th>
                <th>Total</th>
                <th>% of Total</th>
                <th>US</th>
                <th>EU</th>
            </tr>
            <tr style="font-weight: bold;">
                <td colspan="5">Product Profile</td>
            </tr>
            <apex:repeat value="{!PGStatCurrStrList}" var="pg">
                <tr>
                    <td>&nbsp;&nbsp;&nbsp;{!pg['Label']}</td>
                    <td>{!pg['Total']}</td>
                    <td>{!pg['%']}</td>
                    <td>{!pg['US']}</td>
                    <td>{!pg['EU']}</td>
                </tr>
            </apex:repeat>
        </table>
   </apex:outputPanel>
</apex:pageBlockSection>

All Answers

Vamsi KrishnaVamsi Krishna
Its becos of the apex:pageBlockSection since each column renders into 2 cells one for label and one for value..

you should either move the table out of the pageBlockSection or if you need it to be within the pageBlockSection, then wrap your table inside an outputPanel

<apex:pageBlockSection title="Section 1: Summary Color Codes" columns="1">
   <apex:outputPanel>        
        <table width="100%" border="1" cellpadding="0" cellspacing="0">
            <tr>
                <th></th>
                <th>Total</th>
                <th>% of Total</th>
                <th>US</th>
                <th>EU</th>
            </tr>
            <tr style="font-weight: bold;">
                <td colspan="5">Product Profile</td>
            </tr>
            <apex:repeat value="{!PGStatCurrStrList}" var="pg">
                <tr>
                    <td>&nbsp;&nbsp;&nbsp;{!pg['Label']}</td>
                    <td>{!pg['Total']}</td>
                    <td>{!pg['%']}</td>
                    <td>{!pg['US']}</td>
                    <td>{!pg['EU']}</td>
                </tr>
            </apex:repeat>
        </table>
   </apex:outputPanel>
</apex:pageBlockSection>

This was selected as the best answer
MiralomaMiraloma
Thanks for the workaround!
MiralomaMiraloma
Apologies in advance from a newbie, how do I mark it solved? Setting the answer as "best answer"?