PageBlockSection with 4 columns

I have a pageblocksection with 4 columns where the spacing between 3rd and 4th is not equal.How to fix the spacing between columns.

<apex:page standardController="Account">
   <apex:form >
      <apex:pageBlock title="My Block"> 
           <apex:pageBlockSection title="My Section" columns="4" collapsible="false">
                <apex:outputField value="{!Account.Field1__c}"/>
                <apex:outputField value="{!Account.Field2__c}"/>
                <apex:outputField value="{!Account.Field3__c}"/>
                <apex:outputField value="{!Account.Field4__c}"/>
                <apex:outputField value="{!Account.Field5__c}"/>
                <apex:outputField value="{!Account.Field6__c}"/>
                <apex:outputField value="{!Account.Field7__c}"/>
                <apex:outputField value="{!Account.Field8__c}"/>
              </apex:pageBlockSection> 
         </apex:pageBlock> 
  </apex:form>

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

You’ll find that it’s not recommended to use PageBlockSection with more than two columns. You may be better off writing your own HTML as you’ll be able to style it more precisely.

“Salesforce stylesheets are optimized for either one or two columns.” ( https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_compref_pageBlockSection.htm )

Method 2

Another method is to create a table (as many columns as needed).
Embed a pageBlockSection columns=”1″ within each table column.

This still compressed the labels a little, so I used styling as well. This example simulates 3 columns:

    <apex:page ...>

    <style type="text/css">
    .labelCol.vfLabelColTextWrap.first.last {
    white-space: nowrap;
    }
    </style>

    <table width="100%">
        <tr><td width="34%">
            <apex:pageBlockSection columns="1" ...>
        </td><td width="33%">
            <apex:pageBlockSection columns="1" ...>
        </td><td width="33%">
            <apex:pageBlockSection columns="1" ...>
        </td></tr>
    </table>

… and an added benefit of utilizing a table with 2 pageBlockSections is that the code looks nicer with the data from the left side and the right side separated.

Method 3

Thanks @mrBlaQ.Here is my solution.

<apex:page standardController="Account">
   <apex:form >
        <table width="100%">
               <tr>
                <td>
                <apex:outputLabel value="Field1" style="font-weight:bold"/>
                &nbsp;&nbsp;
                <apex:outputField value="{!Account.Field1__c}"/>
                </td>
                <td>
                <apex:outputLabel value="Field2" style="font-weight:bold"/>
                &nbsp;&nbsp;
                 <apex:outputField value="{!Account.Field2__c}"/>
                </td>
                <td>
                <apex:outputLabel value="Field3" style="font-weight:bold"/>
                &nbsp;&nbsp;
                <apex:outputField value="{!Account.Field3__c}"/>
                </td>
                <td>
                <apex:outputLabel value="Field4" style="font-weight:bold"/>
                &nbsp;&nbsp;
                <apex:outputField value="{!Account.Field4__c}"/>
                </td>
               </tr>
               <tr>
               <td>
               <apex:outputLabel value="Field5" style="font-weight:bold"/>
                &nbsp;&nbsp;
                <apex:outputField value="{!Account.Field5__c}"/>
                </td>
                <td>
                <apex:outputLabel value="Field6" style="font-weight:bold"/>
                &nbsp;&nbsp;
                 <apex:outputField value="{!Account.Field6__c}"/>
                </td>
                <td>
                <apex:outputLabel value="Field7" style="font-weight:bold"/>
                &nbsp;&nbsp;
                <apex:outputField value="{!Account.Field7__c}"/>
                </td>
                <td>
                <apex:outputLabel value="Field8" style="font-weight:bold"/>
                &nbsp;&nbsp;
                <apex:outputField value="{!Account.Field8__c}"/>
                </td>
               </tr>
              </table> 
          </apex:form> 
 </apex:page>

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0