title: HTML table with 100% width, with vertical scroll inside tbody
body: <p>How can I set for <code>&lt;table&gt;</code> 100% width and put only inside <code>&lt;tbody&gt;</code> vertical scroll for some height?</p>
  
  <p><img src="https://i.stack.imgur.com/vq9Ka.jpg" alt="vertical scroll inside tbody"></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>table {
      width: 100%;
      display:block;
  }
  thead {
      display: inline-block;
      width: 100%;
      height: 20px;
  }
  tbody {
      height: 200px;
      display: inline-block;
      width: 100%;
      overflow: auto;
  }
    </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
    &lt;thead&gt;
      &lt;tr&gt;
       &lt;th&gt;Head 1&lt;/th&gt;
       &lt;th&gt;Head 2&lt;/th&gt;
       &lt;th&gt;Head 3&lt;/th&gt;
       &lt;th&gt;Head 4&lt;/th&gt;
       &lt;th&gt;Head 5&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
       &lt;td&gt;Content 1&lt;/td&gt;
       &lt;td&gt;Content 2&lt;/td&gt;
       &lt;td&gt;Content 3&lt;/td&gt;
       &lt;td&gt;Content 4&lt;/td&gt;
       &lt;td&gt;Content 5&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I want to avoid adding some additional div, all I want is simple table like this and when I trying to change display, <code>table-layout</code>, <code>position</code> and much more things in CSS table not working good with 100% width only with fixed width in px.</p>