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>   {!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>   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>   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>   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>   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>   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>   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>   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>   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>

May 13, 2014
·
Like
0
·
Follow
1

Best Answer chosen by Miraloma

Vamsi 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>   {!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>

May 13, 2014
·
Like
2
·
Dislike
0

This was selected as the best answer

Miraloma
Thanks for the workaround!

May 13, 2014
·
Like
0
·
Dislike
0

Miraloma
Apologies in advance from a newbie, how do I mark it solved? Setting the answer as "best answer"?

May 13, 2014
·
Like
0
·
Dislike
0

You need to sign in to do that.

Need an account? Sign Up

Have an account? Sign In

Dismiss

Browse by Topic

Welcome to Support!

Show

sorted by

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

All Answers

You need to sign in to do that.