title: Align tables top
body: <p>I have three tables. When they are all filled with data (10 rows) they look fine. See picture
  <img src="https://i.stack.imgur.com/pDfqq.jpg" alt="enter image description here"></p>
  
  <p>When, however, the max capacity (i.e. 10 rows) hasn't been reached, the tables gets centered.
  <img src="https://i.stack.imgur.com/C2HWo.jpg" alt="enter image description here"></p>
  
  <p>I want to keep the alignment top as in the first picture and also the buttons on the bottom. Is there any simple style to do this? My HTML looks like this</p>
  
  <pre><code>&lt;table width="100%"&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;table id="SomeTableContainer"&gt;
                  &lt;tr&gt;
                      &lt;th&gt;Name&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
              &lt;button id="prev1"&gt;&lt;&lt;&lt;/button&gt;
              &lt;button id="next1"&gt;&gt;&gt;&lt;/button&gt;
              &lt;button id="create1"&gt;Create&lt;/button&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;table id="SomeOtherTableContainer"&gt;
                  &lt;tr&gt;
                      &lt;th&gt;Name&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
              &lt;button id="prev2"&gt;&lt;&lt;&lt;/button&gt;
              &lt;button id="next2"&gt;&gt;&gt;&lt;/button&gt;
              &lt;button id="create2"&gt;Create&lt;/button&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;table id="OtherTableContainer"&gt;
                  &lt;tr&gt;
                      &lt;th&gt;Name&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
              &lt;button id="prev3"&gt;&lt;&lt;&lt;/button&gt;
              &lt;button id="next3"&gt;&gt;&gt;&lt;/button&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>