0

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.

Here is my table:

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

And here is the table before add the div before tbody:

enter image description here

And here is the table after add the div before tbody:

enter image description here

halfer
  • 19,824
  • 17
  • 99
  • 186
Sumon Bappi
  • 1,937
  • 8
  • 38
  • 82
  • add table-layout:fixed to your table, anyway you should make a jsfiddle with your problem. Anyway I believe that inserting a div inside is invalid.
     – QoP Apr 26 '16 at 08:06
  • Possible duplicate of [HTML table with 100% width, with vertical scroll inside tbody](http://stackoverflow.com/questions/17067294/html-table-with-100-width-with-vertical-scroll-inside-tbody) – sQer Apr 26 '16 at 08:34

1 Answers1

0

Change from:

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

to

<tbody style="width: inherit; overflow-y:scroll; height:100px; overflow-x: hidden;">
Floern
  • 33,559
  • 24
  • 104
  • 119
Frazer Kirkman
  • 1,003
  • 1
  • 14
  • 23