Visualforce- how to “stretch” columns in a table inside an apex:pageblocksection

Visualforce- how to “stretch” columns in a table 

inside an apex:pageblocksection 

Using apex:pageblocksections are a great way to tidy up a page, and also a great look and feel for a vf page.

One issue in an apex:pageblocksection, is that the columns in a apex:datatable or apex:pageblocktable only seem to stretch halfway across the page, even if you specify the width.

<apex:pageBlockSection title="Diner Details">
 <apex:dataTable value="{!Mystery_Diner_Report__c}" var="mdr" width="100%" 
       columns="2" columnsWidth="60%,40%">
   <apex:column id="c7" headerValue="Account Name">
     <apex:outputField value="{!mdr.Account_Name__c}" />
   </apex:column>
 </apex:dataTable>
</apex:pageBlockSection>

The solution is to add a Column attribute into the apex:pageblocksection, and add a width attribute into the datatable or pageblocktable, e.g.::

<apex:pageBlockSection title="Diner Details" columns="1">
   <apex:outputPanel >
      <apex:dataTable value="{!Mystery_Diner_Report__c}" var="mdr" width="100%" 
            columns="2" columnsWidth="60%,40%">
        <apex:column id="c7" headerValue="Account Name">
           <apex:outputField value="{!mdr.Account_Name__c}" />
         </apex:column>
       </apex:dataTable>
    </apex:outputPanel>
 </apex:pageBlockSection>