Columns and Rows width adjustment

e.g.

    <style>
        .tableStyle {border-collapse: collapse; border-spacing: 0px 0px; }
        .colStyle1 { width: 16.5%;text-align:right; padding-top:3px; padding-bottom:5px}
        .colStyle2 { width: 10%; padding-left:20px; padding-top:5px; padding-bottom:5px}
        .colStyle3 { width: 10%;text-align:right; padding-top:5px; padding-bottom:5px}
        .colStyle4 { width: 21%; padding-left:20px; padding-top:5px; padding-bottom:5px}
        .colStyle5 { width: 10%;text-align:right; padding-top:5px; padding-bottom:5px}
        .colStyle6 { width: 32%; padding-left:20px; padding-top:5px; padding-bottom:4px}
        .rowstyle { border-bottom-style:solid; border-bottom-width:1px;border-bottom-color:#E8E8E8 }
    </style>



        <apex:pageBlockSection showHeader="true" title="Allowances" columns="1" id="allowances">
            <apex:panelGrid columns="6" border="0" styleClass="tableStyle" width="100%" columnClasses="colStyle1,colStyle2,colStyle3,colStyle4,colStyle5,colStyle6" rowClasses="rowstyle">