[SalesForce] How to increase the apex datatable width dynamically

I have designed an inline vf page with lightning design css. But my apex:datatable is not responsive. If i increase the resolution it is not fit into the page block . Please provide me a solution . Here is my code :

<style>
.TableTitle {
font-weight: bold;
color: #CC0000;
}
</style>

<div class = "slds" style="clear:both;overflow:hidden;height:auto;width:125%;" id = "tooltip"> 
 <apex:outputPanel id="idsubcribedContractPanel" rendered="{!IF(showDetail = 4 || showDetail=69,true, false)}">        
    <apex:pageblock >
      <apex:pageMessages ></apex:pageMessages>
        <apex:pageblocksection title="Subscribed">                       
          <apex:dataTable value="{!contracts}" var="w" border="1" style="border-style:hidden;width:auto;" align="center" styleClass="slds-table slds-table--bordered" headerClass="TableTitle">

                <apex:column value="{!w.idContract}" headerValue="{!$Label.Rforce_ContractID}"/>
                <apex:column value="{!w.strType}" headerValue="{!$Label.VFP05_Type}" />
                <apex:column value="{!w.strTechLevel}" headerValue="{!$Label.Rforce_TechnicalLevel}" />
                <apex:column value="{!w.strServiceLevel}" headerValue="{!$Label.Rforce_ServiceLevel}" />
                <apex:column value="{!w.strProductCode}" headerValue="{!$Label.Rforce_ProductCode}" />
                <apex:column value="{!w.strInitKm}" headerValue="{!$Label.Rforce_InitialKM}" />
                <apex:column value="{!w.strMaxSubsKm}" headerValue="{!$Label.Rforce_MileageMaximumSubscript}" />
                <apex:column value="{!w.strSubsDate}" headerValue="{!$Label.Rforce_SubscriptionDate}" />
                <apex:column value="{!w.strInitContractDate}" headerValue="{!$Label.Rforce_InitialdateoftheContract}"/>
                <apex:column value="{!w.strEndContractDate}" headerValue="{!$Label.Rforce_DateofTermination}" />
                <apex:column value="{!w.strStatus}" headerValue="{!$Label.Rforce_StatusofContract}" />
                <apex:column value="{!w.strUpdDate}" headerValue="{!$Label.Rforce_UpdatedDateofContract}" /> 
            </apex:dataTable>
        </apex:pageblocksection>

    </apex:pageblock>

</apex:outputpanel>  
 </div>

Best Answer

The apex:pageBlockSection defaults to the 2 columns. So your table just can't stretch to the 100% because the second (empty) column is there.

To avoid the second column you should set the columns attribute to 1:

<apex:pageBlockSection title="Subscribed" columns="1">  

And then set the width of the dataTable to 100%:

<apex:dataTable style="border-style:hidden;width:100%;" ...>