jquery - HTML table with 100% width, with vertical scroll inside tbody without td wdth -

i have tried solution posted hashem qolami in post html table 100% width, vertical scroll inside tbody, having issues.

let me fill in, in case require additional details.

i've tried multiple posts. everywhere have found fixed width td in tbody. require dynamic width, according data in tbody.

it working in sites when there different sections of js, css. not working when combine single html. html image:html image

// change selector if needed  var $table = $('table.scroll'),    $bodycells = $table.find('tbody tr:first').children(),    colwidth;    // adjust width of thead cells when window resizes  $(window).resize(function() {    // tbody columns width array    colwidth = $bodycells.map(function() {      return $(this).width();      alert("hii");    }).get();      // set width of thead columns    $table.find('thead tr').children().each(function(i, v) {      $(v).width(colwidth[i]);    });  }).resize(); // trigger resize handler

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;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>    <table class="scroll">    <thead>      <tr>        <th>head 1</th>        <th>head 2</th>        <th>head 3</th>        <th>head 4</th>        <th>head 5</th>      </tr>    </thead>    <tbody>      <tr>        <td>content 1</td>        <td>content 2</td>        <td>content 3</td>        <td>content 4</td>        <td>content 5</td>      </tr>      <tr>        <td>content 1</td>        <td>lorem ipsum dolor sit amet.</td>        <td>content 3</td>        <td>content 4</td>        <td>content 5</td>      </tr>      <tr>        <td>content 1</td>        <td>content 2</td>        <td>content 3</td>        <td>content 4</td>        <td>content 5</td>      </tr>      <tr>        <td>content 1</td>        <td>content 2</td>        <td>content 3</td>        <td>content 4</td>        <td>content 5</td>      </tr>      <tr>        <td>content 1</td>        <td>content 2</td>        <td>content 3</td>        <td>content 4</td>        <td>content 5</td>      </tr>      <tr>        <td>content 1</td>        <td>content 2</td>        <td>content 3</td>        <td>content 4</td>        <td>content 5</td>      </tr>      <tr>        <td>content 1</td>        <td>content 2</td>        <td>content 3</td>        <td>content 4</td>        <td>content 5</td>      </tr>    </tbody>  </table>

uncomment table width

table.scroll {   width: 100%;   /* optional */   /* border-collapse: collapse; */   border-spacing: 0;   border: 2px solid black;  } 

please try this

cells responding accordingly when resized.