function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
sforcegarrett7sforcegarrett7 

Aligning pageBlockTable section Columns

Hi all,

 I am trying to clean up my visualforce page so the table displaying my query results aligns better.  What could I use to clean this up so the columns align better?  Thanks in advance for any help!

 

Here is the page:  https://c.na12.content.force.com/servlet/servlet.ImageServer?id=015U0000001KJT8&oid=00DU0000000IYPv&lastMod=1379618932000

*Note...I did remove this image since it was no longer needed after the solution was provided*

 

<apex:page standardController="Contact"  extensions="GenerateTopListResults" >

   <apex:pageBlock mode="maindetail">
        
       <apex:pageBlockTable value="{!CampaignMemberVolunteerList}" var="a" rendered="{!(CampaignMemberVolunteerList.size != 0)}">
            <apex:column value="{!a.Campaign.Name}" headerValue="Most Recent Volunteer Campaign Name"/>
            <apex:column value="{!a.Campaign.Status}" headerValue="Volunteer Campaign Status"/>    
        </apex:pageBlockTable>

        <apex:pageBlockTable value="{!CampaignMemberCommunicationList}" var="b" rendered="{!(CampaignMemberCommunicationList.size != 0)}">
            <apex:column value="{!b.Campaign.Name}" headerValue="Most Recent Communications Campaign"/> 
            <apex:column value="{!b.Campaign.Status}" headerValue="Communication Campaign Status"/>        
        </apex:pageBlockTable>
       
        <apex:pageBlockTable value="{!RelationshipList}" var="c" rendered="{!(RelationshipList.size != 0)}">
            <apex:column value="{!c.Role__c}" headerValue="Most Recent Relationship Role"/>    
            <apex:column value="{!c.Program_Interest__c}" headerValue="Program Interest/Participation"/>     
        </apex:pageBlockTable> 
        
        <apex:pageBlockTable value="{!DocumentationList}" var="d" rendered="{!(DocumentationList.size != 0)}">
            <apex:column value="{!d.Number_of_Repair_Applications__c}" headerValue="Number of Repair Applications"/>        
        </apex:pageBlockTable>
                  
        <apex:pageBlockTable value="{!DonationList}" var="e" rendered="{!(DonationList.size != 0)}">
            <apex:column value="{!e.Opportunity.Name}" headerValue="Donation Name"/>   
            <apex:column value="{!e.Opportunity.CloseDate}" headerValue="Donation Close Date"/>
        </apex:pageBlockTable>    
                                
    </apex:pageBlock>
</apex:page>
Best Answer chosen by Admin (Salesforce Developers) 
bob_buzzardbob_buzzard

You'll to specify the sizes of the tables and columns using CSS I think.  Something like:

 

<apex:pageBlockTable style="width:100%" value="{!CampaignMemberVolunteerList}" var="a" rendered="{!(CampaignMemberVolunteerList.size != 0)}">
   <apex:column style="width:50%" value="{!a.Campaign.Name}" headerValue="Most Recent Volunteer Campaign Name"/>
   <apex:column style="width:50%" value="{!a.Campaign.Status}" headerValue="Volunteer Campaign Status"/>    
</apex:pageBlockTable>

If you use the same percentages for each table/column, they should align themselves correctly 

 

All Answers

bob_buzzardbob_buzzard

You'll to specify the sizes of the tables and columns using CSS I think.  Something like:

 

<apex:pageBlockTable style="width:100%" value="{!CampaignMemberVolunteerList}" var="a" rendered="{!(CampaignMemberVolunteerList.size != 0)}">
   <apex:column style="width:50%" value="{!a.Campaign.Name}" headerValue="Most Recent Volunteer Campaign Name"/>
   <apex:column style="width:50%" value="{!a.Campaign.Status}" headerValue="Volunteer Campaign Status"/>    
</apex:pageBlockTable>

If you use the same percentages for each table/column, they should align themselves correctly 

 

This was selected as the best answer
sforcegarrett7sforcegarrett7

Bob!  Thank you very much!  That looks a lot better!  I figured it was some kind of CSS I needed.  I appreciate the help!