I have a VF page with a custom controller that calculates grand totals and sub totals for some of my object's numeric values. I have these in separate pageBlockTable tags in my page. Both sections have the same headers. All works well, but I'm having an issue when the browser page is re-sized. The grand total pageBlockTable (which contains headers) sizes at a different rate than the sub-total pageBlockTable. So the columns end up being different sizes, even though they share the same width percentage. Does anyone know a way around this?

VF Page:

<apex:page StandardController="Quote__c" recordSetVar="quotes" Extensions="CalculateQLISummary" action="{!init}" tabStyle="Quote__c">
    <apex:pageMessages id="pgMess" />

    <style type="text/css">
        .SectHeader {
            font-weight: bold;
            background: #288fb0;
            color: white;
            border:1px solid black;
        .TblHeader {
            display: None;

    <apex:form id="frmReview" > 
        <apex:pageBlock id="pgBlckQSummary" title="Quote Line Summary">
            <center><apex:commandButton title="Back to Quote" value="Back to Quote" action="{!cancel}"/></center><br/><br/>

        <apex:outputText value="AGGREGATE AMOUNTS" styleClass="SectHeader"/><p/>

            <apex:pageBlockTable title="GRAND TOTAL" value="{!GT}" var="gt" style="width:100%">

                <apex:column headerValue="Contract Year" styleClass="txt" headerClass="col" style="width:33.33%">
                    <apex:outputText value="TOTAL CONTRACT"/>
                <apex:column headerValue="List Price" styleClass="txt" headerClass="col" style="width:33.33%">
                <apex:column headerValue="Final Price" styleClass="txt" headerClass="col" style="width:33.33%">
            <apex:pageBlockTable title="Summary" value="{!YT}" var="quoteTot" style="width:100%">

                <apex:column headerValue="Contract Year" styleClass="txt" headerClass="TblHeader" style="width:33.33%">
                <apex:column headerValue="List Price" styleClass="txt" headerClass="TblHeader" style="width:33.33%">
                <apex:column headerValue="Final Price" styleClass="txt" headerClass="TblHeader" style="width:33.33%">


You should specify the "correct" size to have the best chance of your columns being sized correctly: 33%, or perhaps even 33.33% for better accuracy. Using 20% for each column means the browser is open to determine where the remaining 40% of the table goes to.

  • Thanks. I tried that, but I am still getting the same issue. The section that has the headers shrinks at a lower rate than the one without the headers.
    – J. Neilan
    Sep 17 '18 at 16:33

For anyone wondering, I figured this out for my use case. I increased the header percentage for the columns that had the largest header and decreased others to make them add to 100%. So I ended up with a 40% - 30% - 30% split and it works.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.