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 >