title: Table rows not fitting the <tbody> width
body: <p>In a HTML table, I have to set <code>display: block;</code> property to <code>tbody</code> in order to make <code>tbody</code> scrollable vertically. My issue is that when I add this property, the width of the rows <code>&lt;tr&gt;</code> is not fitting <code>tbody</code> width anymore. It seems like <code>width: 100%;</code> is not taken into account anymore for the rows...</p>
  
  <p>I want to set a `' absolute width (e.g. 300px) and inside this table, set a 100% width to the rows so that the rows fit the table width.</p>
  
  <p>See example here: <a href="https://jsfiddle.net/wiltomap/0fnLhujn/" rel="nofollow noreferrer">https://jsfiddle.net/wiltomap/0fnLhujn/</a>.</p>
  
  <p>Here are my code: </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>body {
    font-family: Arial;
    font-size: 0.8em;
  }
  
  table {
    width: 400px;
    margin: auto;
    background-color: lightblue;
  }
  
  table,
  th,
  td {
    border: 1px solid red;
    border-collapse: collapse;
  }
  
  thead {
    color: #fff;
    background-color: #00f;
    display: block;
    width: 100%;
  }
  
  tbody {
    height: 100px;
    width: 100%;
    display: block;
    overflow-y: scroll;
  }
  
  tr {
    width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;table&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;th&gt;#&lt;/th&gt;
            &lt;th&gt;Species&lt;/th&gt;
            &lt;th&gt;Date&lt;/th&gt;
            &lt;th&gt;Locality&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
          &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;Erithacus rubecula&lt;/td&gt;&lt;td&gt;2001-05-05&lt;/td&gt;&lt;td&gt;Manchester, UK&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;2&lt;/td&gt;&lt;td&gt;Erithacus rubecula&lt;/td&gt;&lt;td&gt;2001-05-05&lt;/td&gt;&lt;td&gt;Manchester, UK&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;3&lt;/td&gt;&lt;td&gt;Erithacus rubecula&lt;/td&gt;&lt;td&gt;2001-05-05&lt;/td&gt;&lt;td&gt;Manchester, UK&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;4&lt;/td&gt;&lt;td&gt;Erithacus rubecula&lt;/td&gt;&lt;td&gt;2001-05-05&lt;/td&gt;&lt;td&gt;Manchester, UK&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;5&lt;/td&gt;&lt;td&gt;Erithacus rubecula&lt;/td&gt;&lt;td&gt;2001-05-05&lt;/td&gt;&lt;td&gt;Manchester, UK&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;6&lt;/td&gt;&lt;td&gt;Erithacus rubecula&lt;/td&gt;&lt;td&gt;2001-05-05&lt;/td&gt;&lt;td&gt;Manchester, UK&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;7&lt;/td&gt;&lt;td&gt;Erithacus rubecula&lt;/td&gt;&lt;td&gt;2001-05-05&lt;/td&gt;&lt;td&gt;Manchester, UK&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;8&lt;/td&gt;&lt;td&gt;Erithacus rubecula&lt;/td&gt;&lt;td&gt;2001-05-05&lt;/td&gt;&lt;td&gt;Manchester, UK&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;9&lt;/td&gt;&lt;td&gt;Erithacus rubecula&lt;/td&gt;&lt;td&gt;2001-05-05&lt;/td&gt;&lt;td&gt;Manchester, UK&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;10&lt;/td&gt;&lt;td&gt;Erithacus rubecula&lt;/td&gt;&lt;td&gt;2001-05-05&lt;/td&gt;&lt;td&gt;Manchester, UK&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;11&lt;/td&gt;&lt;td&gt;Erithacus rubecula&lt;/td&gt;&lt;td&gt;2001-05-05&lt;/td&gt;&lt;td&gt;Manchester, UK&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;12&lt;/td&gt;&lt;td&gt;Erithacus rubecula&lt;/td&gt;&lt;td&gt;2001-05-05&lt;/td&gt;&lt;td&gt;Manchester, UK&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;13&lt;/td&gt;&lt;td&gt;Erithacus rubecula&lt;/td&gt;&lt;td&gt;2001-05-05&lt;/td&gt;&lt;td&gt;Manchester, UK&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;14&lt;/td&gt;&lt;td&gt;Erithacus rubecula&lt;/td&gt;&lt;td&gt;2001-05-05&lt;/td&gt;&lt;td&gt;Manchester, UK&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;15&lt;/td&gt;&lt;td&gt;Erithacus rubecula&lt;/td&gt;&lt;td&gt;2001-05-05&lt;/td&gt;&lt;td&gt;Manchester, UK&lt;/td&gt;&lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>