title: How to ensure 2 columns line up when both table cells have inner tables
body: <p>I have a HTML table, where cell #3 and cell #4 have inner tables.</p>
  
  <p>I need the rows in each table in cell #3 and cell#4 to line up correctly.</p>
  
  <p>The problem is sometimes the length of text line a row may go beyond a single line, and the other table doesn't have this so the lines don't match up.</p>
  
  <p>How can I correct this seeing as the data is coming from the database which I don't have control of?</p>
  
  <p>I have created a jsfiddle: <a href="http://jsfiddle.net/HPkvV/" rel="nofollow">http://jsfiddle.net/HPkvV/</a></p>
  
  <pre><code>&lt;style&gt;
  .main
  {
   border: 1px solid #000000;
  }
  .main td
  {
   border: 1px solid #000000;
  }
  .grid
  {
      border-left: none !important;
      border-right: none !important;
      border-top:1px solid #dddddd;
      border-bottom:1px solid #dddddd;
  }
  .grid td
  {
      border-left: none !important;
      border-right: none !important;
      border-top:1px solid #dddddd;
      border-bottom:1px solid #dddddd;
  }
  &lt;/style&gt;
  
  
  
  &lt;table width="400"&gt;
  &lt;tr&gt;
      &lt;td&gt;
          &lt;table width="100%" class="main"&gt;
              &lt;td valign=top&gt;column 1&lt;/td&gt;
              &lt;td valign=top&gt;column 2&lt;/td&gt;
              &lt;td valign=top&gt;column 3
                  &lt;table id="names" class="grid"&gt;
                      &lt;tr&gt;
                          &lt;td&gt;line 1&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;line 2&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;line 3&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;
              &lt;/td&gt;
              &lt;td valign=top&gt;column 4
                  &lt;table id="desc" class="grid"&gt;
                      &lt;tr&gt;
                          &lt;td&gt;line 1 description is a little too long so it wraps line 1 description is a little too long so it wraps&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;line 2 description&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;line 3 description&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;
              &lt;/td&gt;
  
          &lt;/table&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>