title: Bootstrap4 beta: tables and d-inline-block
body: <p>I want to display a few tables side by side with horizontal scrolling overflow if the tables do not fit on the page. </p>
  
  <p>jsfiddle example: <a href="https://jsfiddle.net/c949Lspy/10/" rel="nofollow noreferrer">https://jsfiddle.net/c949Lspy/10/</a></p>
  
  <p>Bootstrap: <a href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="nofollow noreferrer">https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css</a></p>
  
  <pre><code>&lt;div style="white-space: nowrap;"&gt;
  
  &lt;table class="table table-bordered d-inline-block align-top" style=" padding: 0px;"&gt;
      &lt;thead&gt;
        &lt;tr&gt;&lt;th&gt; Heading 1&lt;/th&gt;&lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
  
        &lt;tr&gt;&lt;td&gt;Row content &lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;Row content &lt;/td&gt;&lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <ol>
  <li>The inspector tells me Bootstrap is somehow setting the width of the
  table equal to the width of the viewport. Why is that? (1st row in
  jsfiddle)</li>
  <li>If i set the width of the table manualy, the table elements do
      not fill up the space, which looks awkward. (2nd row in jsfiddle)</li>
  <li>How do i set the tables to fill up exactly the space they need / are
      given explicitly?</li>
  </ol>