apex:outputPanel condition for apex:repeat won't render table properly

Question

I'm working on creating PDF Purchase order page in VisaulForce. I get stuck when rendering Purchase order line items, which are related items to Purchase order. All worked great until I put a condition in tr, apex:outputPanel to not render related items with status Cancelled. After that change, the rows of table are not rendered properly, without table formating and borders, just as plain text. How can I fix it?

 <apex:variable var="lineNumber" value="{!1}" />
        <table class="lineItems">
            <tr>
                <th>
                   Line Nr.
                </th>
                <th>
                   Item
                </th>
                <th>
                   Description
                </th>
                <th>
                   Total Cost
                </th>
            </tr>
            <apex:repeat value="{!purchaseOrder.SCMC__PurchaseOrderLineItems__r}" var="line" rendered="true">
                <apex:outputPanel rendered="{!line.SCMC__Status__c != 'Cancelled'}">
                <tr>
                    <td>
                        <apex:outputText rendered="true">
                        {!lineNumber}
                        </apex:outputText>
                        <apex:variable var="lineNumber" value="{!lineNumber+1}" />
                    </td>
                    <td>
                        <apex:outputText rendered="true">
                        {!line.SCMC__Item_Master__r.Name}
                        </apex:outputText>
                    </td>
                    <td>
                        <apex:outputText rendered="true">
                        {!line.SCMC__Description__c}
                        </apex:outputText>
                    </td>                        
                    <td>
                        <apex:outputText value="{0, number, ### ##0.00}">
                            <apex:param value="{!line.SCMC__Total_Cost__c}" />&nbsp;&nbsp;
                        </apex:outputText>
                        <apex:outputText rendered="true">
                            {!purchaseOrder.SCMC__Currency_Master__r.Name}
                        </apex:outputText>
                    </td>
                </tr>
                </apex:outputPanel>
        </apex:repeat>
        </table>

Answer 1

EDIT Most importantly, set layout="none" on the outputPanel

Also...

If you remove all rendered="true" attributes, I think your page should work much better.

You don't need to specify this attribute unless you are referring to a variable from a controller or you specifically need to turn off an element.

Also, you could simplify your table delimiter items to:

<td>
    <apex:outputText value="{!lineNumber}" />
    <apex:variable var="lineNumber" value="{!lineNumber+1}" />
</td>

Or even:

<td>{!lineNumber}
    <apex:variable var="lineNumber" value="{!lineNumber+1}" />
</td>

Answer 2

I had a similar issue where the table was not properly rendered for the text inside

<apex:outputpanel rendered="{!IF(opportunity.Type == 'New Customer - Lennox Partner Incentive', true ,false)}" >  

Later tried with

<table width="100%" cellspacing="0" cellpadding="0" border="0" class="btnDiv" >
    <apex:variable var="v" value="1" rendered="{!IF(opportunity.Type == 'New Customer - Lennox Partner Incentive', true ,false)}" > 
</table>

and it worked!