I am using JSF2.0, rich faces 4.2.2, tomcat 6.0.35 for my application. On one of the pages, there are two rich:extendedDataTable components for 'tablelist' and 'tablecontent'. On click of row of tablelist datatable, an ajax call is made and tablecontent datatable is rendered. The issue is that the rendered datatable has disabled scrollbars beacuse of which others columns are not visible.

Below is the code: 

 <h:body>
 <h:form>
  
<h:panelGrid columns="2" cellspacing="0"  >  

       <rich:extendedDataTable value="#{tableBean.tableList}"  var="o" id="table1" iterationStatusVar="it" style="width:200px;height:400px;" onrowclick="select('#{o.name}');"
        <f:facet name="header">
        <h:outputText value="Table List" style="align:left;"></h:outputText>
        </f:facet>  
        <rich:column width="199px" id="tablist" >  
                <h:outputText value="#{o.name}"/>  
        </rich:column>              
       </rich:extendedDataTable> 

      <rich:extendedDataTable value="#{tableBean.rows}"  var="r" id="tableHum" iterationStatusVar="it" style="width:400px;height:400px;" >
        <f:facet name="header">
        <h:outputText value="Table content" style="align:left;"></h:outputText>
        </f:facet>  
        <c:forEach items="#{tableBean.columns}" var="c" varStatus="i">
            <rich:column  >
                <f:facet name="header">
                    <h:outputText value="#{c}" />
                </f:facet>
                <h:outputText value="#{r[i.index]}" style="align:center;"/> 
            </rich:column>
        </c:forEach>

    </rich:extendedDataTable>

      </h:panelGrid>
      <a4j:jsFunction name="select" action="#{tableBean.getTableData}" render="tableHum" execute="@this" status="tableDataStatus" >
    <a4j:param name="param1" assignTo="#{tableBean.tableName}" />
            </a4j:jsFunction>
      </h:form>
</h:body> 

Please help me?