title: Two tables side by side in a container won't float
body: <p>I have a problem while trying to place two tables next to each other in a div which is supposed to be scrollable horizontally (x-axis).</p>
  
  <p>When placed outside the container div, the tables float perfectly next to each other, but when inside the container, a break occurs after the first table.</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>.scroll-container {
      width: 200px;
      height: 100px;
      background: chocolate;
      overflow-x: scroll;
      overflow-y: hidden;
  }
  
  table {
      display: table;
      float: left;
  }
  
  tr:nth-of-type(even) {
      background-color: yellow;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="scroll-container"&gt;
    &lt;table&gt;
      &lt;tr&gt;&lt;td&gt;Dummy&lt;/td&gt;&lt;td&gt;Dummy&lt;/td&gt;&lt;td&gt;Dummy&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;Dummy&lt;/td&gt;&lt;td&gt;Dummy&lt;/td&gt;&lt;td&gt;Dummy&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;Dummy&lt;/td&gt;&lt;td&gt;Dummy&lt;/td&gt;&lt;td&gt;Dummy&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;Dummy&lt;/td&gt;&lt;td&gt;Dummy&lt;/td&gt;&lt;td&gt;Dummy&lt;/td&gt;&lt;/tr&gt;
    &lt;/table&gt;
    &lt;table&gt;
      &lt;tr&gt;&lt;td&gt;Dummy&lt;/td&gt;&lt;td&gt;Dummy&lt;/td&gt;&lt;td&gt;Dummy&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;Dummy&lt;/td&gt;&lt;td&gt;Dummy&lt;/td&gt;&lt;td&gt;Dummy&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;Dummy&lt;/td&gt;&lt;td&gt;Dummy&lt;/td&gt;&lt;td&gt;Dummy&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;Dummy&lt;/td&gt;&lt;td&gt;Dummy&lt;/td&gt;&lt;td&gt;Dummy&lt;/td&gt;&lt;/tr&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  
  &lt;p&gt;without the scroll-container:&lt;/p&gt;
  &lt;table&gt;
    &lt;tr&gt;&lt;td&gt;Dummy&lt;/td&gt;&lt;td&gt;Dummy&lt;/td&gt;&lt;td&gt;Dummy&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;Dummy&lt;/td&gt;&lt;td&gt;Dummy&lt;/td&gt;&lt;td&gt;Dummy&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;Dummy&lt;/td&gt;&lt;td&gt;Dummy&lt;/td&gt;&lt;td&gt;Dummy&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;Dummy&lt;/td&gt;&lt;td&gt;Dummy&lt;/td&gt;&lt;td&gt;Dummy&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  &lt;table&gt;
    &lt;tr&gt;&lt;td&gt;Dummy&lt;/td&gt;&lt;td&gt;Dummy&lt;/td&gt;&lt;td&gt;Dummy&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;Dummy&lt;/td&gt;&lt;td&gt;Dummy&lt;/td&gt;&lt;td&gt;Dummy&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;Dummy&lt;/td&gt;&lt;td&gt;Dummy&lt;/td&gt;&lt;td&gt;Dummy&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;Dummy&lt;/td&gt;&lt;td&gt;Dummy&lt;/td&gt;&lt;td&gt;Dummy&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>