vertical scroll is not working properly in tbody breaking the previous tbody width
<p>I have a table where I need to add a vertical scroll bar in tbody. I have watched some code but not fit for me or I am not understanding. I am also not so good in css. I have add a div and place my tbody there. It works for scroll but tbody width has become smaller. Can anybody please help me in this please? Here are my table below ::</p>

<pre><code>&lt;table id="familyHist" class="table table-striped table-bordered"&gt;
    &lt;thead&gt;
    &lt;tr&gt;
        &lt;th colspan="{{(relationCount + 1)}}" class="info"&gt;
            &lt;g:if test="${session.userIsPatient}"&gt;
                Please click the appropriate box to indicate family history for a given category or medical issue.
            &lt;/g:if&gt;
            &lt;g:else&gt;
                Please click the appropriate box to indicate positive family history.
            &lt;/g:else&gt;
        &lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;th&gt;&lt;/th&gt;
        {{#each relations}}
            {{#if .relation !== 'Uncles' &amp;&amp; .relation !== 'Aunts'}}
                &lt;th class="text-center"&gt;{{relation}}*&lt;/th&gt;
            {{else}}
                &lt;th class="text-center"&gt;{{relation}}&lt;/th&gt;
            {{/if}}
        {{/each}}
    &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;div style="width: inherit; overflow-y:scroll; height:100px; overflow-x: hidden;"&gt;
    &lt;tbody&gt;
    {{#each rows: index}}
    &lt;tr id="familyHistoryRow-{{symptomId}}"&gt;
        &lt;td&gt;
            &lt;input type="hidden" name="familyHistId" value={{familyHistId}}/&gt;
            {{description}}
        &lt;/td&gt;
        {{#if isUserDefined}}
        &lt;td colspan="8"&gt;
            &lt;div class="-fluid"&gt;
                &lt;form class="form-inline"&gt;
                    &lt;div class="col-sm-9 col-md-8 col-lg-7 form-group"&gt;
                        &lt;g:render template="/patient/familyHist/textarea" /&gt;
                    &lt;/div&gt;
                    &lt;div class="col-sm-3 col-md-4 col-lg-5 form-group"&gt;
                        &lt;g:render template="/patient/familyHist/buttons" /&gt;
                    &lt;/div&gt;
                &lt;/form&gt;
            &lt;/div&gt;
        &lt;/td&gt;
        {{else}}
        {{#each relationMap}}
        &lt;td class="text-center"&gt;
            &lt;g:render template="/patient/familyHist/checkbox" /&gt;
        &lt;/td&gt;
        {{/each}}
        {{/if}}
    &lt;/tr&gt;
    {{/each}}
    &lt;/tbody&gt;
    &lt;/div&gt;
&lt;/table&gt;
</code></pre>

<p>And here is the table before add the div before tbody >></p>

<p><a href="https://i.stack.imgur.com/M4iVm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/M4iVm.png" alt="enter image description here"></a></p>

<p>And here is the table after add the div before tbody >></p>

<p><a href="https://i.stack.imgur.com/h1WM6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/h1WM6.png" alt="enter image description here"></a></p>