title: Nested HTML Tables with two columns, td is not aligning
body: <p>I have an html table embedded inside a Bootstrap panel with two columns.  Inside each column is another table with two more columns.  Each table needs to be independent as the number of rows in each can be variable depending on the data that populates it.</p>
  
  <p>Anyway, the problem is that since the first table is usually longer in height than the second, the tops of the two tables don't usually align.  Before you suggest it, I've tried with divs before and using the bootstrap col size ideas and the primary reason for going with tables is to allow me to left align the "titles" columns like Contact and Address in the sample.  </p>
  
  <p>I've also tried all kinds of border, padding and vertical-align styles on all the tags I could think of, but no luck.</p>
  
  <p>Here's the code:</p>
  
  <pre><code>    &lt;html&gt;
        &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
          &lt;script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"&gt;&lt;/script&gt;
          &lt;link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css"
            rel="stylesheet" type="text/css"&gt;
          &lt;link href="http://pingendo.github.io/pingendo-bootstrap/themes/default/bootstrap.css"
            rel="stylesheet" type="text/css"&gt;
        &lt;/head&gt;
        &lt;body style="font-family: Calibri, Helvetica, Arial, sans-serif;" &gt;
          &lt;div&gt;
            &lt;div &gt;
              &lt;div class="row col-md-12" &gt;
                &lt;div class="row"&gt;
                  &lt;div class="row col-md-6"&gt;
                    &lt;div class="panel panel-primary"&gt;
                      &lt;div class="panel-heading"&gt;
                        &lt;h4&gt;Contact Details&lt;/h4&gt;
                      &lt;/div&gt;
                      &lt;div class="panel-body" id="contactDetails"&gt;
                        &lt;table&gt;
                          &lt;tbody&gt;
                            &lt;tr&gt;
                              &lt;td&gt;
                                &lt;table&gt;
                                  &lt;tbody&gt;
                                    &lt;tr&gt;
                                      &lt;td style="vertical-align:top; padding:4px;"&gt;
                                        &lt;label class="control-label"&gt;Contact:&lt;/label&gt;
                                      &lt;/td&gt;
                                      &lt;td style="padding:4px"&gt;
                                        &lt;span &gt;John Doe&lt;/span&gt;
                                      &lt;/td&gt;
                                    &lt;/tr&gt;
                                    &lt;tr&gt;
                                      &lt;td style="vertical-align:top; padding:4px;"&gt;
                                        &lt;label class="control-label"&gt;Address:&lt;/label&gt;
                                      &lt;/td&gt;
                                      &lt;td style="padding:4px"&gt;
                                        &lt;div&gt;
                                          &lt;div class="sp-sm-12"&gt;
                                            &lt;span&gt;123 Any Address&lt;/span&gt;
                                          &lt;/div&gt;
                                          &lt;div class="sp-sm-12"&gt;
                                            &lt;span&gt;Address 2&lt;/span&gt;
                                          &lt;/div&gt;
                                          &lt;div class="sp-sm-12"&gt;
                                            &lt;span&gt;ANYTOWN, US 12345&lt;/span&gt;
                                          &lt;/div&gt;
                                          &lt;div class="sp-sm-12"&gt;
                                            &lt;span &gt;United States&lt;/span&gt;
                                          &lt;/div&gt;
                                        &lt;/div&gt;
                                      &lt;/td&gt;
                                    &lt;/tr&gt;
                                  &lt;/tbody&gt;
                                &lt;/table&gt;
                              &lt;/td&gt;
                              &lt;td&gt;
                                &lt;table&gt;
                                  &lt;tbody&gt;
                                    &lt;tr&gt;
                                      &lt;td style="vertical-align:top; padding:4px;"&gt;
                                        &lt;label class="control-label"&gt;&lt;span&gt;Home phone:&lt;/span&gt;&lt;/label&gt;
                                      &lt;/td&gt;
                                      &lt;td style="padding:4px"&gt;
                                        &lt;span&gt;
                                        &lt;span data-bind="text: Number()"&gt;555-867-5309&lt;/span&gt;
                                        &lt;/span&gt;
                                      &lt;/td&gt;
                                    &lt;/tr&gt;
                                    &lt;tr&gt;
                                      &lt;td style="vertical-align:top; padding:4px;"&gt;
                                        &lt;label class="control-label"&gt;&lt;span&gt;Email:&lt;/span&gt;&lt;/label&gt;
                                      &lt;/td&gt;
                                      &lt;td style="padding:4px"&gt;
                                        &lt;div &gt;
                                          &lt;span&gt;
                                          &lt;a href="mailto:anyone@anywhere.com"&gt;anyone@anywhere.com&lt;/a&gt;
                                          &lt;/span&gt;
                                          &lt;br&gt;
                                        &lt;/div&gt;
                                      &lt;/td&gt;
                                    &lt;/tr&gt;
                                    &lt;tr&gt;
                                      &lt;td style="vertical-align:top; padding:4px;"&gt;
                                        &lt;label class="control-label"&gt;&lt;span&gt;Business:&lt;/span&gt;&lt;/label&gt;
                                      &lt;/td&gt;
                                      &lt;td style="padding:4px"&gt;
                                        &lt;div"&gt;
                                        &lt;div class="row"&gt;
                                          &lt;span&gt;
                                          &lt;span&gt;&lt;/span&gt;
                                          &lt;/span&gt;
                                        &lt;/div&gt;
                                                    &lt;/div&gt;
                                    &lt;/td&gt;
                                  &lt;/tr&gt;
                                &lt;/tbody&gt;
                              &lt;/table&gt;
                            &lt;/td&gt;
                          &lt;/tr&gt;
                        &lt;tr&gt;
                            &lt;td colspan="2"&gt;
                               TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING
                             &lt;/td&gt;
                        &lt;/tr&gt;
                      &lt;/tbody&gt;  
                      &lt;/table&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;/div&gt;
        &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>I've created a jsfiddle here:<a href="https://jsfiddle.net/raedwa01/hxxdjLzn/" rel="nofollow noreferrer">https://jsfiddle.net/raedwa01/hxxdjLzn/</a></p>
  
  <p>And here's an image of what I see.  You can see Home Phone is not aligned with Contact.  </p>
  
  <p><img src="https://i.stack.imgur.com/JmeFO.png" alt="Rendering of HTML"></p>
  
  <p>What Do i need to do to align these?</p>