Grow table td height dynamically depending on the information on table

Question

I have a html table. One of the td's have 2 divs and a rad tab strip in them.Something like

 <td>
  First td
 </td>
 <td>
  Second td
 <div>
    ....
 <div style="border: solid; border-color: brown; border-width: 3px; height: 100%;width:100%;">  
  <div>
    <telerik:RadMultiPage ID="radCustInfo" runat="server" SelectedIndex="0">
                            <telerik:RadPageView ID="radCustInfoPage" runat="server">
                                <telerik:RadTabStrip ID="radCustInfoTab" runat="server" MultiPageID="radMultiPageCustInfo"
                                    SelectedIndex="0" Orientation="HorizontalTop" Align="Left">
   <Tabs>
    <telerik:RadTab Text="Notes"  ></telerik:RadTab>
     <telerik:RadTab Text="Contacts"  ></telerik:RadTab>
     ..2 more tabs
  ....</div>

So when user clicks on one of them, lets say Contacts the td should expand in height. My Contacts are more than 10. 5 emails,5 phone numbers. The first td height is not set anywhere. Lets say its about 180px in height. Out of the 4 Tabs above, I want the other 3 to show up on parallel with the first td, i.e. 180px. The second tab "Contacts" can be of dynamic height. Both these tds are at the top of the page. So there is information below them. So the information has to go down if the td grows. If the information in the td's has height less than 180px then the border of the div should be capped at 180px;

To summarize: If info in tabs is not much then let the td be at 180px and show border around. If info in tabs is great then expand the td and let it grow. I know it is a question particular to my own situation but I need help. If you need more info,please ask.Thanks

Answer 1

In your div style try this, change it to

min-height:180px;

Make sure that your table have an auto height.