垂直滚动不能正常工作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前添加后的股利>>

Answer 1

变化来自：

<div style="width: inherit; overflow-y:scroll; height:100px; overflow-x: hidden;"> 
<tbody> 

到

<tbody style="width: inherit; overflow-y:scroll; height:100px; overflow-x: hidden;">