title: HTML table with 100% width, with vertical scroll inside tbody without td wdth
body: <p>I have tried the solution posted by Hashem Qolami  in post <a href="https://stackoverflow.com/q/17067294/5840390">HTML table with 100% width, with vertical scroll inside tbody</a>, but am having issues.</p>
  
  <p><img src="https://i.stack.imgur.com/totny.png" alt="Tried Scenario-Issue"></p>
  
  <p>Let me fill you in, in case you require additional details.</p>
  
  <p>I've tried multiple posts. Everywhere I have found only fixed width for <code>td</code> in <code>tbody</code>. But I require a dynamic width, according to the data in <code>tbody</code>.</p>
  
  <p>It is working in sites when there are different sections of js, css.
  But not working when i combine everything to a single html.
  My Html image:<a href="https://i.stack.imgur.com/LqM15.png" rel="nofollow noreferrer">HTML Image</a></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-js lang-js prettyprint-override"><code>// Change the selector if needed
  var $table = $('table.scroll'),
    $bodyCells = $table.find('tbody tr:first').children(),
    colWidth;
  
  // Adjust the width of thead cells when window resizes
  $(window).resize(function() {
    // Get the tbody columns width array
    colWidth = $bodyCells.map(function() {
      return $(this).width();
      alert("hii");
    }).get();
  
    // Set the width of thead columns
    $table.find('thead tr').children().each(function(i, v) {
      $(v).width(colWidth[i]);
    });
  }).resize(); // Trigger resize handler</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>table.scroll {
    /* width: 100%; */
    /* Optional */
    /* border-collapse: collapse; */
    border-spacing: 0;
    border: 2px solid black;
  }
  
  table.scroll tbody,
  table.scroll thead {
    display: block;
  }
  
  thead tr th {
    height: 30px;
    line-height: 30px;
    /* text-align: left; */
  }
  
  table.scroll tbody {
    height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
  }
  
  tbody {
    border-top: 2px solid black;
  }
  
  tbody td,
  thead th {
    /* width: 20%; */
    /* Optional */
    border-right: 1px solid black;
    /* white-space: nowrap; */
  }
  
  tbody td:last-child,
  thead th:last-child {
    border-right: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;table class="scroll"&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;tr&gt;
        &lt;td&gt;Content 1&lt;/td&gt;
        &lt;td&gt;Lorem ipsum dolor sit amet.&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;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;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;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;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;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>