title: html - CSS way to display tables from left most side of the page
body: <p>My requirement is to display data in the tables. And the data is dynamic which i'm retrieving information from the database.
  Based on the loop written in jsp page, it displays the tables and data in it. The last table displayed in the second row should start from
  the left most area and should start after the maximum height of the table displayed in the first row (i.e., second table height).
  Please suggest, what would be the CSS changes to allow the table in the second row start from left and it should leave the gap of the maximum height table generated in the first row.
  Please find the jsfiddle: <a href="http://jsfiddle.net/0w9yo8x6/89/" rel="nofollow">http://jsfiddle.net/0w9yo8x6/89/</a> (If output screen in jsfiddle is maximized we can see the second row table not displayed at left in the page).</p>
  
  <p>Below is the sample html code:</p>
  
  <pre><code>    &lt;div align="center" style="padding: 10px; overflow-y: auto; border: 2px;"&gt;
        &lt;div id="test" style="float: left; border: 0px solid #99ffff;"&gt;
         &lt;table cellpadding="2px" cellspacing="2px" style="border: 0px solid #ffffff; margin-right: 15px; margin-bottom: 4px;"&gt;
          &lt;tr&gt;
          &lt;td&gt;
          &lt;table cellpadding="0px" cellspacing="0px" style="margin-bottom: 5px;border-bottom:solid gray 2px; border-right:solid gray 2px;" width="350px" height="150px" border="1"&gt;
  
        &lt;tr height="15px"&gt;
               &lt;td  class="viewData" style="border-right:solid gray 1px;valign:middle;vertical-align: middle;" align="center"&gt;Column1&lt;/td&gt;
               &lt;td  class="viewData" style="border-right:solid gray 1px;valign:middle;vertical-align: middle;" align="center"&gt;Column2&lt;/td&gt;
       &lt;/tr&gt;
  
  &lt;tr align="center"&gt;
               &lt;td class="viewData" style="border-right:solid gray 1px;vertical-align: middle;background-color: #EDEDED" align="center"&gt;
                      &lt;span style="font-family:Tahoma;color:#AF4B65;font-size:10px;letter-spacing:1px;font-weight:bold;"&gt;
                     Row1A  &lt;/span&gt; 
                       &lt;/td&gt;
                       &lt;td class="viewData" style="background-color: #D2DEEF;vertical-align: middle"&gt;
                      Row1B
                       &lt;/td&gt;
  
  &lt;tr align="center"&gt;
               &lt;td class="viewData" style="border-right:solid gray 1px;vertical-align: middle;background-color: #EDEDED" align="center"&gt;
                      &lt;span style="font-family:Tahoma;color:#AF4B65;font-size:10px;letter-spacing:1px;font-weight:bold;"&gt;
                      Row2A &lt;/span&gt; 
                       &lt;/td&gt;
                       &lt;td class="viewData" style="background-color: #D2DEEF;vertical-align: middle"&gt;
                      Row2B
                       &lt;/td&gt;
  &lt;/tr&gt;&lt;/table&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Thanks.</p>