title: Indented hierarchical table structure
body: <p>I am trying to create a hierarchical display of nested tables, where each sub level is indented further from the parent. I'm open to using table or div. The closest I've come is below. It looks mostly correct in IE (except that the borders on the right are mashed together). In Chrome the sub item border is extending beyond the parent on the right.</p>
  
  <p>I'm open to using divs as well.</p>
  
  <pre><code>&lt;html&gt; 
  &lt;head&gt; 
  &lt;style type="text/css"&gt; 
  .ItemTable
  {
      width: 100%;
      margin-left: 20px;
      border: solid 1px #dbdce3;
  }
  &lt;/style&gt; 
  &lt;/head&gt; 
  &lt;body&gt; 
      &lt;table class="ItemTable"&gt;
          &lt;tr&gt;
              &lt;td&gt;Item 1&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;table class="ItemTable"&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Item  1A&lt;/td&gt;
                      &lt;/tr&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/body&gt; 
  &lt;/html&gt;
  </code></pre>