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>
