DHTMLx Grid size increasing

I have a table with two TD having width 40% and 60%

In the TD with width 60% , i have a dhtml grid with few columns initially hidden.When i set the visibility to true my grid starts expanding and cross the td width.Not sure why its happening

Code below

<td valign="top" width="60%" id="rightGridFrameTable" > <table align="left" id="mainSecuritiesResultTable" width="100%"> <tr> <td align="left" valign="top" width="100%"> <div id="aptCurveChartDiv" style="width: 100%"></div> </td> </tr> <tr> <td> <div id="securitiesDiv" class="aptCurveDiv mainDiv"> <table> <tr> <th align="left" class="wmc-tableheader"> <span id="securitiesLabelSpan" class="wmc-tableheader" style="float: left"><b>Securities</b></span> </th> </tr> <tr> <td align="left" width="100%"> <div id="securitiesResultTableDiv" class="aptCurveDiv"> <textarea id="aptSecuritiesResultEle" class="hide"></textarea> <div id="securitiesResultTable" class="aptSecuritiesResultEle dhtmlxGridDiv150" ></div> </div> <div id="loadingSecuritiesInfoDiv" class="aptCurveDiv" style="color: red;">Loading Securities Information...</div> <div id="tempNoSecuritiesInfoDiv" class="aptCurveDiv" style="color: red">No securities information found</div> </td> </tr> </table> </div> </td> </tr> </table> </td>

Try to change the html layout as



Addin extra div wrapper must resolve the issue.

Thanks it worked. Any specific reason on why we need a parent Div ?

HTML table always size to the content. It will not preserve defined width, but will size to fit the content inside ( TD element can’t have overflow, at least not by default )

By adding new DIV element we are preventing overflow in the TD element, so it will preserve defined 100% width.