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>

Attribution to: sfdc

Possible Suggestion/Solution #1

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>

Attribution to: sfdc

Possible Suggestion/Solution #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.

Attribution to: Nicholas Koopman

Possible Suggestion/Solution #3

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 )

Attribution to: mrBlaQ
This content is remixed from stackoverflow or stackexchange. Please visit https://salesforce.stackexchange.com/questions/34385