title: How to do multiple levels of nested tables in JQuery/HTML
body: <p>I'm trying to create tables with multiple levels of nesting which can be expanded/collapsed. So the main table has rows which can be expanded to show the child rows in the middle of the table, who themselves can be expanded.</p>
  
  <p>Each table needs to have their own headers and preferably the columns would all line up but have the start of the child tables be slightly indented as I try to show below. </p>
  
  <p>For example: </p>
  
  <pre><code>ColHeader1              ColHeader2   // main table headers only shown at the top
  record1                 ...
    ChildHeader1          ChildHeader2 // child headers shown for each table
    childrec1             ...
       SubChildHeader1    SubChildHeader2 // child headers shown for each table
       subchildrec1       ...
    childrec2             ...
  record2                 ...
    ChildHeader1          ChildHeader2 // child headers shown for each table
    childrec5             ...
  record3                 ...
  </code></pre>
  
  <p>I've tried to create the code by expanding a sample I found, but it doesn't work for expanding the inner most table. The code can be found here: <a href="http://jsfiddle.net/afsz5brg/" rel="nofollow">http://jsfiddle.net/afsz5brg/</a></p>
  
  <p>The end product will be in a ASP.Net MVC app, but for now I'm just trying to get it working in javascript/JQuery so that hopefully I can just change the data being sent to it.
  I'm happy to consider alternative ways for doing it or be told if any of the code is doing something bad/deprecated.</p>