title: Table doesn't fit in parent div
body: <p>Here is an example of what I am trying to do(put a table in a div and make it fill the div): <a href="https://jsfiddle.net/ph3ban0v" rel="nofollow">ex1_jsfiddle</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
    height: 100%;
    table-layout: fixed;
  }
  td,
  th {
    border: 1px solid;
    text-align: left;
    padding: 0px 55px 0px 55px;
  }
  tr:nth-child(even) {
    background-color: lightgreen;
  }
  tr {
    margin-top: 0;
  }
  aside {
    background-color: lightblue;
    border: solid 2px;
    position: absolute;
    float: left;
    height: 100%;
    width: 15%;
  }
  #table_div {
    float: left;
    border: solid 2px;
    margin-left: 25%;
    height: 300px;
    width: 700px;
    border-color: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;aside&gt;sidebar&lt;/aside&gt;
  &lt;div id="table_div"&gt;
    &lt;table&gt;
      
      &lt;tr&gt;
        
        &lt;th&gt;Firstname&lt;/th&gt;
        
        &lt;th&gt;Lastname&lt;/th&gt;
        
        &lt;th&gt;Age&lt;/th&gt;
        &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Jill&lt;/td&gt;
        &lt;td&gt;Smith&lt;/td&gt;
        &lt;td&gt;50&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Eve&lt;/td&gt;
        &lt;td&gt;Jackson&lt;/td&gt;
        &lt;td&gt;94&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;John&lt;/td&gt;
        &lt;td&gt;Doe&lt;/td&gt;
        &lt;td&gt;80&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The problem is that as you see in <code>ex1</code> the table is getting out of the parent div. And the most strange thing is that if I indent the elements between <code>&lt;div_id="table_div&gt;</code> and <code>&lt;/div&gt;</code> with 1 tab, it works BUT ONLY in jsfiddle: <a href="https://jsfiddle.net/6d52c67r/" rel="nofollow">ex2_jsfiddle</a></p>
  
  <p>When I try it in my browser(Chrome) it doesn't work.</p>
  
  <p>So, can someone explain to me what is going on?</p>