[SalesForce] How to Wrap PageBlockTable inside PageBlock

I created a very simple VF page which displays 28 fields from a custom object. The code looks like this: 

<apex:pageBlock  >
          <apex:pageBlockSection >
              <apex:pageBlockTable value="{!caseSoLst}"  var="caseSo" >        
                 <apex:column headerValue="Owner" > 
                  <apex:outputText value="{!caseSo.Case_No__r.Account.name}"  />                        
                 </apex:column>
                <!-- ....
                27 other such entries for different fields -->
              </apex:pageBlockTable>
            </apex:PageBlockSection>
       </apex:PageBlock>

However the PageBlockTable goes outside the PageBlock and it is not completely wrapped by the PageBlock background. The image below shows the output. How do I get the PageBlock to wrap around the PageBlockTable? I tried a lot of different styling combinations but none of them seem to have worked. I imagined this should be straight forward but nothing helped. Not sure what I am I missing here. Is this even possible?

enter image description here

Best Answer

Tables are tables. When tables get too big in any web page, the browser will keep expanding that table vertically and horizontally right and down until all the content fits.

It's incredibly unlikely that you'll fit nearly 30 fields in a table, and have it fit inside a page block.

Fortunately, help is available. There are scripts out there, like SlickGrid that allow a table with many columns to fit within their parent container.

Scripts like this do so by allowing the table to scroll both vertically and horizontally while displaying the header row at the top of the virtual scroll area no matter how the table is scrolled (like you'd see in a spreadsheet program).

CSS alone isn't going to solve this problem. It simply doesn't have the syntax necessary to comply with the html specs and make tables behave like spreadsheets.

Related Topic