div and pageblocktable inside a pageblocksection

Question

I'm trying to do something I think is pretty simple. I have a pageblock, then a pageblocksection because I want to be able to collapse a table of data. I've wrapped a div around a pageblocktable in the the section but visualforce is rendering it strange. It renders the applicationsTable div as one row in the pageblocksection and then the table in another row. Leaving a giant blank space above the table. I'm trying to render the div as a way to limit the number of rows the table displays on the screen with a scrollbar to see the rest. It works fine if I remove the pageblocksection. I can't use a pageblocksection item because there are too many child components.

<apex:pageBlock title="Selected Applications" id="applications">
  <apex:pageBlockButtons location="top">
     <apex:commandButton action="{!ext.refresh}" value="Refresh" reRender="applications" immediate="true"/>
  </apex:pageBlockButtons>
  <apex:pageBlockSection collapsible="true" columns="1" showHeader="true">
    <div class="applicationTableDiv">
      <apex:pageBlockTable value="{!ext.applications}" var="app">
        <apex:column>
          <apex:outputLink value="{!app.id}">Edit</apex:outputLink>
        </apex:column>
      <apex:repeat value="{!$ObjectType.My_Custom__c.FieldSets.DisplayFields}" var="f">
        <apex:column headerValue="{!f.Label}">
          <div class="{!f.FieldPath}">
             <apex:outputField value="{!app[f]}"/> 
          </div>
        </apex:column>
      </apex:repeat>
      </apex:pageBlockTable>
    </div>
  </apex:pageBlockSection>
</apex:pageBlock>

Answer 1

You can leave out the div and instead add a marker class to your apex:pageBlockTable using styleClass="applicationTable". The apex:pageBlockSection will have added a parent div with the class name pbSubsection as part of its normal rendering. (Yes this solution relies on the HTML generated which is not ideal but sometimes hard to avoid.)

Now if CSS selectors supported parent selectors it would be possible to apply your CSS just using CSS. But as they don't, a small bit of e.g. jQuery is needed to go up the parent hierarchy and add the CSS class to the div:

$('table.applicationTable').closest('div.pbSubsection').addClass('applicationTableDiv');