title: Nesting Jquery-UI tabs
body: <p>I am trying to nest jquery-ui tabs to create a page like this:</p>
  
  <blockquote>
    <p>User Info (tab)<br /> Address (tab)<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   City (sub-tab)  <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;State (sub-tab)</p>
  </blockquote>
  
  <p>So there will be two sub-tabs underneath the address tab (one with checkboxes of cities and another with checkboxes of states).</p>
  
  <p>I googled for this problem and I <a href="http://forum.jquery.com/topic/jquery-ui-tabs-is-nesting-possible" rel="nofollow">found a posting on the jquery forum</a> which describes a similar problem. The <a href="http://jsbin.com/ubaqe" rel="nofollow">posters created a sample/demo</a> which had nested tabs and I've emulated their setup on my local webserver.</p>
  
  <p>However, strangely, when I add a table to my nested tab, it appears outside the tabs on my page. (For example, in the div id="subtabs-1", if I add a table it doesn't appear inside the tabs when I load the page).</p>
  
  <p>I think that my website may have other CSS which is causing the table element to be dislocated outside of the tabs. How would I identify what CSS is being applied to tables and which one is problematic? Or does anyone have another idea about what might be the problem? (Unfortunately, I can't link to my actual page since it is inside our intranet). Thanks.</p>