title: Aligning Nested Table Widths
body: <p>I have some nested tables.  There is the main, outer table, it has to nested tables for the left and right columns, and in each column some tables are stacked on top of each other.  What I can't seem to figure out is how to get the tables in the column to all span the same width (mostly in the right column).  Here is the HTML, scaled down for readability:</p>
  
  <pre><code>&lt;table class="outer"&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;table class="column" id="left_column"&gt;
                      &lt;tr&gt;
                          &lt;td&gt;
                              &lt;table class="cell" id="t1"&gt;
                              &lt;/table&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;
                              &lt;table class="cell" id="t2" style="margin-top:20px; margin-left:86px"&gt;
                              &lt;/table&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;table class="column" id="rightColumn"&gt;
                      &lt;tr&gt;
                          &lt;td&gt;
                              &lt;table class="cell" id="t3"&gt;
                              &lt;/table&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;
                              &lt;table class="cell" id="t4"&gt;
                              &lt;/table&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;
                              &lt;table class="cell" id="t5"&gt;
                              &lt;/table&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;
                              &lt;table class="cell" id="t6"&gt;
                              &lt;/table&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;
                              &lt;table class="cell" id="t7"&gt;
                              &lt;/table&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;
                              &lt;table class="cell" id="t8"&gt;
                              &lt;/table&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;
                              &lt;table class="messages" id="t9"&gt;
                              &lt;/table&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  </code></pre>
  
  <p>And here is the relevant CSS:</p>
  
  <pre><code>.outer
  {
  margin: auto;
  }
  .column
  {
  border: none;
  margin-left: auto;
  margin-right: auto;
  }
  table.cell
  {
  border-collapse: collapse;
  }
  #rightColumn table
  {
  padding: 10px;
  width: 100%;
  }
  </code></pre>
  
  <p>Any advice is appreciated.</p>