I want to have this appearance in a visual force page
but the issue is i have used css styles over the pageblocksection but no result, it seems that when we are using more than 4 columns in a pageblocksection the alignments are not correct, so i came across this panelGrid tag and now i have this following appearance
besides being the alignments correct can i have the appearance like in 1st picture here or else any line separations to that view ?
the code is as follows for the panelgrid
<Apex:pageBlocksection title="Fees" >
<apex:panelGrid width="250%" columns="5">
<apex:outputLabel >Manual Billing Required</apex:outputLabel>
<apex:outputfield value="{!Service_Offering__c.Manual_Billing_Required__c}"/>
<apex:outputLabel ></apex:outputLabel>
<apex:outputLabel ></apex:outputLabel>
<apex:outputLabel ></apex:outputLabel>
<apex:outputLabel ></apex:outputLabel>
<apex:outputLabel ></apex:outputLabel>
<apex:outputLabel >Collected Method</apex:outputLabel>
<apex:outputLabel >Charge To</apex:outputLabel>
<apex:outputLabel >Recurring</apex:outputLabel>
<apex:outputLabel >Annual Membership Fee Rate</apex:outputLabel>
<apex:outputField value="{!Service_Offering__c.Annual_Membership_Fee_Rate__c}" label=""/>
<apex:outputField value="{!Service_Offering__c.Annual_Membership_Fee_Collected_Method__c}" label="" />
<apex:outputField value="{!Service_Offering__c.Annual_Membership_Fee_Charged_to__c}" label="hello"/>
<apex:outputField value="{!Service_Offering__c.AMF_Recurring__c}" label=""/>
<apex:outputLabel >Activation Fee Rate</apex:outputLabel>
<apex:outputField value="{!Service_Offering__c.Activation_Fee_Rate__c}"/>
<apex:outputField value="{!Service_Offering__c.Activation_Fee_Collected_Method__c}" label=""/>
<apex:outputField value="{!Service_Offering__c.Activation_Fee_Charged_to__c}" label=""/>
<apex:outputLabel >ELC Fee Rate</apex:outputLabel>
<apex:outputField value="{!Service_Offering__c.eLC_Fee_Rate__c}"/>
<apex:outputField value="{!Service_Offering__c.eLC_Fee_Collected_Method__c}" label=""/>
<apex:outputField value="{!Service_Offering__c.eLC_Fee_Charged_to__c}" label=""/>
<apex:outputLabel >Invoice Fee Rate</apex:outputLabel>
<apex:outputField value="{!Service_Offering__c.Invoice_Fee_Rate__c}"/>
<apex:outputField value="{!Service_Offering__c.Invoice_Fee_Collected_Method__c}" label=""/>
<apex:outputField value="{!Service_Offering__c.Invoice_Fee_Charged_to__c}" label=""/>
<apex:outputField value="{!Service_Offering__c.IF_Recurring__c}" label=""/>
<apex:outputLabel >Invoice Fee w coverage Rate</apex:outputLabel>
<apex:outputField value="{!Service_Offering__c.Invoice_Fee_w_coverage_Rate__c}"/>
<apex:outputField value="{!Service_Offering__c.Invoice_Fee_w_coverage_Collected_Method__c}" label=""/>
<apex:outputField value="{!Service_Offering__c.Invoice_Fee_w_coverage_Charged_to__c}" label=""/>
<apex:outputLabel >Invoice Presentment Rate</apex:outputLabel>
<apex:outputField value="{!Service_Offering__c.Invoice_Presentment_Rate__c}"/>
<apex:outputField value="{!Service_Offering__c.Invoice_Presentment_Collected_Method__c}" label=""/>
<apex:outputField value="{!Service_Offering__c.Invoice_Presentment_Charged_to__c}" label=""/>
<apex:outputLabel >Financial Service Fee Rate</apex:outputLabel>
<apex:outputField value="{!Service_Offering__c.Financial_Service_Fee_Rate__c}"/>
<apex:outputField value="{!Service_Offering__c.Financial_Service_Fee_Collected_Method__c}" label=""/>
<apex:outputField value="{!Service_Offering__c.Financial_Service_Fee_Charged_to__c}" label=""/>
<apex:outputField value="{!Service_Offering__c.FSF_Recurring__c}" label=""/>
<apex:outputLabel >Consolidated Money Movement Rate</apex:outputLabel>
<apex:outputField value="{!Service_Offering__c.Consolidated_Money_Movement_Rate__c}"/>
<apex:outputField value="{!Service_Offering__c.Consolidated_Money_Movement_Collected_Me__c}" label=""/>
<apex:outputField value="{!Service_Offering__c.Consolidated_Money_Movement_Charged_to__c}" label=""/>
<apex:outputField value="{!Service_Offering__c.CMM_Recurring__c}" label=""/>
<apex:outputLabel >Additional Invoice Fee Rate</apex:outputLabel>
<apex:outputField value="{!Service_Offering__c.Additional_Invoice_Fee_Rate__c}"/>
<apex:outputField value="{!Service_Offering__c.Additional_Invoice_Fee_Collected_Method__c}" label=""/>
<apex:outputField value="{!Service_Offering__c.Additional_Invoice_Fee_Charged_to__c}" label=""/>
<apex:outputField value="{!Service_Offering__c.AIF_Recurring__c}" label=""/>
<apex:outputLabel >License Fee Rate</apex:outputLabel>
<apex:outputField value="{!Service_Offering__c.License_Fee_Rate__c}"/>
<apex:outputField value="{!Service_Offering__c.License_Fee_Collected_Method__c}" label=""/>
<apex:outputField value="{!Service_Offering__c.License_Fee_Charged_to__c}" label=""/>
<apex:outputLabel >Training Fee Rate</apex:outputLabel>
<apex:outputField value="{!Service_Offering__c.Training_Fee_Rate__c}"/>
<apex:outputField value="{!Service_Offering__c.Training_Fee_Collected_Method__c}" label=""/>
<apex:outputField value="{!Service_Offering__c.Training_Fee_Charged_to__c}" label=""/>
<apex:outputLabel >Annual Subscription Fee Rate</apex:outputLabel>
<apex:outputField value="{!Service_Offering__c.Annual_Subscription_Fee_Rate__c}"/>
<apex:outputField value="{!Service_Offering__c.Annual_Subscription_Fee_Collected_Method__c}" label=""/>
<apex:outputField value="{!Service_Offering__c.Annual_Subscription_Fee_Charged_to__c}" label=""/>
<apex:outputField value="{!Service_Offering__c.FEXASF_Recurring__c}" label=""/>
<apex:outputLabel >Carton Fee Rate</apex:outputLabel>
<apex:outputField value="{!Service_Offering__c.Carton_Fee_Rate__c}"/>
<apex:outputField value="{!Service_Offering__c.Carton_Fee_Collected_Method__c}" label=""/>
<apex:outputField value="{!Service_Offering__c.Carton_Fee_Charged_to__c}" label=""/>
<apex:outputField value="{!Service_Offering__c.FEXCF_Recurring__c}" label=""/>
</apex:panelGrid>
</Apex:pageBlocksection>