title: html multiple tables side by side
body: <p>I have six tables side by side. Each table contains a top cell with a header and the next cell with varying amount of text. Each table is set to 30% width and has padding of 10px. The tables are enclosed in an overall <code>&lt;div&gt;</code> and each table is set <code>float: left</code>. On a laptop screen these will normally align 3 tables in the top of the screen and then 3 tables underneath.   </p>
  
  <pre><code>[1][2][3]  
  [4][5][6]  
  </code></pre>
  
  <p>However on some browsers or other devices, the text will occupy more space in table 1 making the table longer. This results in table 4 sorting under table 2 rather than under table 1, e.g.  </p>
  
  <pre><code>[1][2][3]  
     [4][5]  
  [6]  
  </code></pre>
  
  <p>Is there some way whereby I can get them to line up sequentially always taking up the left most space first?  </p>
  
  <p>Code example:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>table,
  td {
    border: 1px solid black;
  }
  
  table {
    float: left;
    width: 30%;
    margin: 10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
  
    &lt;table&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td&gt;Title 1&lt;/td&gt;
          &lt;td&gt;Text text text text text text text text Text text text text text text text text&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  
    &lt;table&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td&gt;Title 2&lt;/td&gt;
          &lt;td&gt;Text text text text text text text text&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  
    &lt;table&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td&gt;Title 3&lt;/td&gt;
          &lt;td&gt;Text text text text text text text text&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  
    &lt;table&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td&gt;Title 4&lt;/td&gt;
          &lt;td&gt;Text text text text text text text text&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  
    &lt;table&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td&gt;Title 5&lt;/td&gt;
          &lt;td&gt;Text text text text text text text text&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  
    &lt;table&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td&gt;Title 6&lt;/td&gt;
          &lt;td&gt;Text text text text text text text text&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>