垂直滾動不能正常工作tbody打破以前的tbody寬度

Question

我有一張桌子，我需要在tbody中添加一個垂直滾動條。我看過一些代碼，但不適合我或者我不理解。我在CSS中也不太好。我添加了一個div並將我的tbody放置在那裏。它適用於滾動但tbody寬度已變小。請有人可以幫助我嗎？這裏是我見下表::

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

這裏是表TBODY前前添加DIV >>

這裏是表TBODY前添加後的股利>>