PageBlockSection with 4 columns

Question

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>

Answer 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 )

Answer 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.

Answer 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>