apex:outputPanel not working with <td> elements

Question

I am building a table using apex:repeats and html and I would like to stick with the method I currently have, but I am not getting my table to output correctly.

Current code is the following,

<apex:repeat id="firstRepeat" value="{!rowList}" var="row">
<tr>
  <td align="center"><apex:outputText value="{!row.person}"/></td>
  <apex:repeat id="secondRepeat" value="{!row.rendered}" var="rend" >
    <apex:outputPanel rendered="{!rend}">
          <td class=" no-events" rowspan="1"></td>
      </apex:outputPanel>
  </apex:repeat>
</tr>

And to explain a little more about it, the first repeat is making the rows, where along the left side I have the names populated. Then there is a list for each row that is called "rendered", currently each list is the length of the table because I want to have a bunch of empty boxes, but later there will be boxes with different row spans (for how long an event is), so the rendered list may be shorter.

The outpanel that wraps each element is what is not working. When I take it out, the table is correctly produced with empty boxes (there is more CSS in the backend for the "no-events" class, but that isn't important for now).

Before you ask.... yes, every boolean in the rendered list is true.

Answer 1

Take a look at the documentation for apex:outputPanel, specifically the layout property`. Right now your markup is generating something like:

<table>
    <tr>
        <td>Text</td>
        <span>
            <td></td>
        </span>
    </tr>
</table>

Try setting the layout property on your apex:outputPanel to none. Another alternative would be to use a "hidden" class:

<apex:repeat id="secondRepeat" value="{!row.rendered}" var="rend" >
    <td class="{!'no-events' & IF(rend, '', ' hidden')}" rowspan="1"></td>
</apex:repeat>

Then some simple css:

.hidden { display: none; }